<!--dom事件级别-->
// dmo0
element.onclick=function () {};
//dom 2
element.addEventListener('click',function () {},false)
//dom3
element.addEventListener('keyup',function () { },false)
// 事件模型
/* 捕获 --> 自上而下
* 冒泡--> 自下而上
* */
// 事件流
/* 三个阶段
* 捕获--->目标元素 ---> 冒泡
*
* */
// 描述dom 事件捕获的具体流程
/*
* window -----> document ----->html ----> body -----> 普通元素的层级获取
* 冒泡: ---->反向上面部分
* 如何获取HTML这个节点 ---->document.getelement
*
* */
// Event 对象常见应用
/*
* event.preventDefault() // 阻止默认事件
* event.stopProgation() // 阻止冒泡
* event.stopImmediatePropagation() // 事件响应优先级
* event.currentTarget() // 处理事件委托 多个子级元素，判断被点击的是谁
* event.target() // 当前被绑点的元素
* */
// 自定义事件 || 模拟事件
var eve = new Event('sugar');
ev.addEventListener('sugar',function () { //sugar 事件名称
console.log(eve)
})
ev.dispatchEvent(eve)
/* 捕获阶段
* var sugar = document.getElementById('sugar')
window.addEventListener('click',function () {
console.log('winodw捕获到了事件')
},true); // true 表示捕获阶段触发
document.addEventListener('click',function () {
console.log('document捕获到了事件')
},true);
document.documentElement.addEventListener('click',function () {
console.log('HTML捕获到了事件')
},true)
document.body.addEventListener('click',function () {
console.log('body捕获到了事件')
},true);
sugar.addEventListener('click',function () {
console.log('div捕获到了click事件')
},true)
*
*
*
* */
<!--Http协议类型-->
/*
* 1.http 协议的主要特点
* 2.http 报文的组成部分
* 3.http方法
* 4.post 和get 的区别
* 5.http状态码
* 6.什么是持久连接
* 7.什么是管线化
*
* */
// 1.http 协议的主要特点
/*
* 1.简单快速 // 直接输入url访问文件
* 2.灵活 // 通过一个http协议完成不同数据类型传输
* 3.无连接 // 连接一次就会断开 不会保持连接
* 4.无状态 // 第一次和第二次连接 http协议是无法判断身份
* // 服务端可以通过session来判断
*
* */
// 2.http 报文的组成部分
/*包含两个部分——请求报文 响应报文
Request Response
* 请求报文{
* 1.请求行 --> http方法 页面地址 http协议以及版本
* 2.请求头 --> key value 等 告诉服务端需要请求哪些数据
* 3.空行 --> 告诉服务端该用请求体来解析
* 4.请求体
* }
* 响应报文{
* 1.状态行
* 2.响应头
* 3.空行
* 4.响应体
* }
* */
// 3.http方法
/*
* pst ---> 传输资源
* get ---> 获取资源
* put ----> 更新资源
* delete ---> 删除资源
* head ---> 获取报文首部
*
* */
// 4.post 和get 的区别
/*
* 1.get在浏览器回退时是无害的，而post则会再次请求
* 2.get 产生的url地址是可以呗收藏的，post则不可以
* 3.get请求会被浏览器主动缓存，post不会主动缓存
* 4.get请求只能进行url编码，post支持多种编码格式
* 5.get请求参数会被完整保存在浏览器历史记录中，post的参数不会被保存
* 6.get请求在url中传输的参数有长度限制，post没有
* 7.对参数类型的限制：get只接受ascll字符，post没有限制
* 8.post比get更安全，get参数直接暴露在url上面
* 9.get参数通过url，post则是在Request body中
*
* */
// 5.http状态码
/*
* 1xx : 指示信息 表示请求已经接收，继续处理
* 2xx ：成功 表示请求已经被成功接收
* 200 请求成功 206 客户发送了一个带有Range头的get请求 服务器完成了
*
* 3xx ：重定向 完成请求必须进行更进一步的操作
* 304 ：读取缓存 也算成功 301（永久） 302（临时） 所请求的页面转移到了新的url
* 4xx : 客户端错误 请求由于发错误或者无法实现请求
* 5xx : 服务器错误 服务器不能实现合法的请求
* */
// 6.什么是持久连接
/* http1.1后版本可以使用
* http协议采用‘请求-应答’模式，当使用普通模式，每个请求/应答 客户和服务器都要
* 重新简历一个连接，完成后立即断开 （http协议为无连接的协议）
*
* 当使用Keep-Alive模式时（持久连接或者连接重用），Keep-Alive功能使客户端到服务器端的连接
* 持续有效，比秒了重新连接或者建立
* */
// 7.什么是管线化
/* http1.1后支持
* 在使用持久连接的情况下
* 请求-响应 请求- 响应 请求- 响应 是没有中断的
*
* 管线化请求下： 直接打包集体传输和返回
* 请求1 请求2 请求3 响应1 响应2 响应3
*
* 服务端得支持管线化
*
* */
/*
* 1.创建对象有几种方法
* --> 原型
* --> 构造函数 任何一个函数被new使用 都可以叫构造函数
* --> 实例
* --> 原型链
*
* instanceof 的原理
*
* new 运算符
* */
// 创建对象有几种方法
/* //1
var sugar = { name:'sugar' }
var sugar1 = new Object({ name:'sugar1'});
//2
var Su = function () {
this.name = 'Suo'
};
var Suo = new Su();
//3
var huahsneg = { name:"sugar" };
var sugar=Object.create(huahsneg)*/
// 原型对象
/*
* 构造函数 constructor<----->prototype 原型对象 ---->_proto_ 原型对象
* new / _proto_
* 实例
*
*
* */
/*
* 1.渲染机制
* 2.js运行机制{
* 队列任务和Event Loop
* }
* 3.页面性能
* 4.错误监控
*
* */
// 1.渲染机制
/*
* --> 什么是DOCTYPE以及作用
* ---> 浏览器渲染过程
* ---> 重排Reflow
* ---> 重绘 Repaint
* ---> 布局Layout
*
* */
// --> 什么是DOCTYPE以及作用
/*
* 网页采用html5，<!DOCTYPE> 声明位于文档中的最前面的位置，
* 处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
这个标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的
HTML 文档。
* */
// ---> 浏览器渲染过程
/* 参考 https://www.cnblogs.com/slly/p/6640761.html
*
* 解析渲染DOM 自上而下
*
* */
// ---> 重排Reflow
/*
* 一个页面由两部分组成：
DOM：描述该页面的结构
render：描述 DOM 节点 (nodes) 在页面上如何呈现
*
*
* 1.解析HTML代码并生成一个 DOM 树。
2.解析CSS文件，顺序为：浏览器默认样式->自定义样式->页面内的样式。
3.生成一个渲染树（render tree）。这个渲染树和DOM树的不同之处在于，它是受样式影响的。它不包括那些不可见的节点。
4.当渲染树生成之后，浏览器就会在屏幕上“画”出所有渲染树中的节点。
*
* 下列情况会发生重排 重绘{
* 页面初始渲染
添加/删除可见DOM元素
改变元素位置
改变元素尺寸（宽、高、内外边距、边框等）
改变元素内容（文本或图片等）
改变窗口尺寸
* }
*
* 如何减少重排
* 1.分离读写操作
* 2.样式集中改变
* 3.可以使用absolute脱离文档流
* 4.使用 display:none ，不使用 visibility，也不要改变 它的 z-index
* 5.能用css3实现的就用css3实现
* */
// ---> 重绘 Repaint
// 2.js运行机制
/* 1. js属于单线程 {
一个时间只能做一个事情
自上而下执行，
优先顺序： 同步任务处理完成后 ---> 异步任务
}
2. 任务队列 {
同步任务 console --> 同步任务
异步任务 setTimeout --> 属于异步任务
}
* console.log(1);
setTimeout(function () {
console.log(2)
},0);
console.log(3)
* /// 1 3 2
*
* console.log('A');
setTimeout(function () {
console.log('B')
},0);
while(true){
}
* // 输出 A 任何异步操作都在同步执行完毕以后再执行
*
*
* for(var i=0;i<4;i++){
* // for循环 遇到setTimeout，没有直接进入异步队列中就+1 等到1秒后再把语句放入异步队列中
setTimeout(function () {
console.log(i);
},1000)
}
*
* */
// 异步任务
/*
* 1.setTimeout setInterval
* 2.dom 事件
* 3.Promise
* */