一、JS运行机制
js单线程的概念：同一个时间内只能干一件事情
任务队列：js有同步任务和异步任务，同步任务放到主线程，异步任务放到任务队列；
Event Loop（事件循环），同步任务结束后，去查询任务队列，把异步任务推到主线程，如此循环。
异步任务：分为宏任务（setTImeout），微任务（promise），微任务优先级大于任务。
开启异步任务有
1：setTImeout，setIntreval
2：DOM事件
3：ES6的promise
for (var i=0;i<4;i++) {
setTimeout(function () {
console.log(i)
},0)
}结果：输出4个4
二 、defer和async
defer和async是script标签的两个属性
相同点： 都是异步加载，只适用外部脚本，不适用内联
不同点： async 会在加载完成后立即执行，因此它是无序执行
defer 会开启新的线程下载脚本文件，等到整个页面解析完后再执行，一般会按照顺序执行
JS加载执行顺序：
如果没有async和defer属性，那么浏览器会立即执行当前JS脚本阻塞后面的脚本；
如果有async属性，那么浏览器加载它会与加载其它资源并行进行，异步加载，它自身下载完毕后立马执行；
如果有defer属性，那么浏览器加载它也会与其它资源并行进行，异步加载，该脚本会被延迟到整个页面全部解析完毕后再执行；
三、页面渲染
1：DOCTYPE及作用
DTD（document type definition ,文档类型定义）：一系列语法规则，定义什么是html，什么是xml等，浏览器用它判断文档类型，用什么协议解析及切换浏览器模式
DOCTYPE：告诉浏览器当前文档包含的是哪个DTD，声明文档类型和DTD规范
作用：文件合法性验证
HTML5
<!DOCTYPE html>
HTML4
有两种模式，严格模式（包含了所有HTML元素和属性，不包括展示弃用元素，如font）
传统模式（包含了所有HTML元素和属性，包括展示的和弃用元素，如font）
2：浏览器渲染过程
1、DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。
2、CSSOM：CSS Object Model，浏览器将CSS解析成树形的数据结构，简称CSSOM。
3、Render Tree: DOM和CSSOM合并后生成Render Tree，如下图：
4、Layout: 计算出Render Tree每个节点的具体位置。
5、Painting：通过显卡，将Layout后的节点内容分别呈现到屏幕上。
浏览器整个流程如上图所示：
1、当用户输入一个URL时，浏览器就会向服务器发出一个请求，请求URL对应的资源
2、接受到服务器的响应内容后，浏览器的HTML解析器，会将HTML文件解析成一棵DOM树，
3、将CSS解析成CSSOM树（CSS Rule Tree
4、根据DOM树和CSSOM树，来构建Render Tree（渲染树）
5、Layou，计算出Render Tree每个节点在屏幕中的位置。
6、painting,按照算出来的规则，通过显卡，把内容画到屏幕上。
3：重排Reflow
元件的几何尺寸变了，是Render Tree的一部分或全部发生了变化。
增加，删除，修改DOM节点，移动DOM位置，修改css样式，改变网页默认字体
4：重绘Repaint
改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
面试题：
页面从输入一个url到页面加载完成都经历了什么
1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应
8、读取页面内容，浏览器渲染，解析html源码
9、生成Dom树、解析css样式、js交互
10、客户端和服务器交互
11、ajax查询
四、事件代理
事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。 “事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的角色。 事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能, 可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件; 此外, 还可以实现动态新增子对象时无需再次对其绑定事件。
DOM事件模型
捕获（从window对象到目标元素）和冒泡（从目标元素往上到window对象）
DOM事件流
（第一阶段：捕获，从window对象到目标元素）目标阶段：第二阶段 （冒泡：从目标元素到window对象）
事件冒泡(event capturing） ：
当一个具体节点元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window
//阻止事件冒泡
event.stopPropagation()
事件捕获
在事件捕获过程中， document 对象首先接收到 click 事件，然后事件沿 DOM 树依次向下，一直传播到事件的实际目标，是一种由外到内的传播
六、post和get区别
get在浏览器回退无害，post会再次请求
get的url可以被收藏，post不可以
get请求会被浏览器缓存，post不可以，除非手动设置
get请求参数会被完整保存在浏览器记录里，post不会保留
七、请描述一下cookies，sessionStorage和localStorage的区别？
相同点：都存储在客户端
不同点：
存储大小
- cookie数据大小不能超过4k。
- sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有效时间
- localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
- sessionStorage 数据在当前浏览器窗口关闭后自动删除。
- cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
数据与服务器之间的交互方式
- cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
- sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
1516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
