原文作者：IQ前端 公号 / LazyCarry
前言
前端开发每天都要跟浏览器打交道，那么浏览器到底是怎样渲染的呢？
我们都知道，JS是单线程的，也就是只有前一个任务执行完成，才会执行下一个任务。如果前一个任务耗时很长，那么下一个任务就只能干等着。显然，这样是非常浪费资源的。那么就要解决这个问题啦，先来了解一下「Event Loop」事件循环。
Event Loop
我们先来看一下HTML标准的解释：为了协调事件event，用户交互user interaction，脚本script，渲染rendering，网络networking等，用户代理user agent必须使用事件循环「Event Loop」。
「event-loop」是解决JS单线程运行阻塞的一种机制，在JS的异步运行机制中，我们需要知道：
- 所有的
「同步任务」都在主线程进行 -
「异步任务」进入任务队列，任务队列会通知主线程，哪个异步任务可以执行，这个异步任务就会进入主线程。异步任务必须指定回调函数，当主线程开始执行异步任务，其实就是在执行对应的回调函数。 - 如果主线程的所有同步任务都执行完，系统就会去读取「任务队列」上的异步任务，如果有可以执行的，就会结束等待状态，进入主线程，开始执行。
- 主线程不断的执行第3步
这就是JS的运行机制，也称为「Event Loop」事件循环。
1.异步任务分类
- 「宏任务」macrotasks：script（整体代码）、setTimeout、setInterval、setImmediate、I/O、UI rendering
- 「微任务」microtasks：process.nextTick（NodeJS）、Promise.then()、Object.observe、MutationObserver
注意：浏览器在执行异步任务的时候会优先执行微任务。
2.理解事件循环
console.log('script start')
setTimeout(() => {
console.log('setTimeout')
}, 0)js
Promise.resolve().then(() => {
console.log('Promise 1')
}).then(() => {
console.log('Promise 2')
})
console.log('script end')
//运行结果
//script start
//script end
//Promise 1
//Promise 2
//setTimeout
过程分析：
1、task队列中只有script，则将script中所有函数放进函数执行栈按顺序执行
2、接下来遇到setTimeout，这里的setTimeout只是将回调函数在0毫秒后放入task队列（其实是4ms，html5标准中规定中要求setTimeout中低于4ms的时间间隔算为4ms），也就是说回调函数在下一个事件循环执行，setTimeout在这里将回调函数放至task列表后就结束了。
3、遇到Promise，属于「microtasks」，所以将第一个then的回调放到microtasks队列
4、执行完所有script代码后，检查microtasks队列，发现队列不为空，所以执行第一个回调函数输出'Promise 1'，由于then的返回仍然是Promise，因此将第二个then的回调放至microtasks队列并执行输出'Promise 1' 5、此时microtasks队列为空，开始执行下一个事件循环。
5.检查task队列发现setTimeout的回调函数，因此执行输出'setTimeout'
注意：promise本身他是一个同步任务,只不过他返回出来的resolve和reject是异步任务,或者说.then或者.catch的为异步任务。
浏览器渲染
上面我们已经大致的了解到事件循环，为什么讲浏览器渲染要扯到事件循环呢？这是因为事件循环跟浏览器渲染有大大的关系，我们来一探究竟。
1.关键渲染路径
关键渲染路径指的是浏览器接收最初的HTML，CSS，JS等资源后，解析，构建树，渲染布局，绘制，最后呈现给用户能看到的界面的这个过程。主要过程如下：
- 解析HTML生成DOM树
- 解析CSS生成CSSOM规则树（CSS Object Model）
- 将DOM树和CSSO规则树合并生成渲染树（rendering tree）
- 遍历渲染树开始布局，计算每个节点的位置大小等信息
- 将渲染树每个节点绘制到屏幕
上面的5个步骤并不是一次性执行完成，例如DOM或者CSSOM被修改时，就会有某个过程需要被重复执行，重新计算并重新渲染。
注意：从上面的第3步可以看出，css是会影响到页面的渲染的，即若css报错，他是会影响到浏览器页面的生成的。
2.构建DOM树
当浏览器收到HTML文档后，会遍历文档节点，生成DOM树。HTML Parser将HTML标记解析成DOM树。
3.构建CSSOM规则树
CSS Parser将每个CSS文件都解析成一个样式表「StyleSheet」对象，每个对象都包含样式规则「Style Rules」，也叫做CSSOM。
4.构建渲染树（Render Tree）
有了DOM树跟CSS规则树，浏览器就可以结合他们来构建渲染「render」树了。浏览器会先从DOM树的根节点开始遍历每个可见节点，然后为每个可见节点找到适配的CSS样式规则并应用到DOM树上。
但是DOM树跟渲染树在结构上又不是完全对应的，区别在于：
-
display:none的元素不在渲染树中（因为他销毁了该元素） -
visibility:hidden的元素在渲染树中（因为他只是把该元素隐藏了）
5.渲染树布局
生成渲染树之后，还是没有办法直接渲染到屏幕上。因为这时候还不知道每一个节点的位置信息，这就需要布局（Layout）的处理了，这个过程其实就是根据渲染树中渲染对象的信息，计算出每一个渲染对象的位置跟尺寸，将渲染对象放在浏览器相应的位置上。
6.回流与重绘
回流（reflow）：当浏览器发现某个部分发生改变影响了布局，需要重新渲染。回流会从html的root frame开始递归往下，依次计算所有节点的尺寸跟位置。回流几乎是无法避免的，只要行为引起了页面上元素的占位方式，定位方式，边距等属性的变化，这都会引起内部，周围，甚至整个页面的重新渲染。
重绘（repaint）：当改变某个元素的背景颜色，文字颜色，边框颜色等不影响它内部以及周围布局的。屏幕的某一部分要重画，但是元素的尺寸位置都没有改变，这就是重绘。
- display:none会出发回流，位置发生了变化。而visibility:hidden只会触发重绘，位置没有变。
- 有些时候，修改了元素的尺寸或者颜色，浏览器不会立即回流或者重绘一次，而是会将这些操作积累下来，然后再做一次reflow，这叫做
异步reflow。 - 浏览器也有立即进行回流的情况，例如resize窗口，改变页面默认字体等。
浏览器渲染进程
浏览器的渲染是多进程的，包含了Browser进程，第三方插件进程，GPU进程，浏览器渲染进程（浏览器内核），这里我们重点分析浏览器渲染进程，因为页面的渲染，JS的执行，事件的触发都是在这个进程中进行的。
划重点：「浏览器的渲染是多进程的，浏览器的渲染进程是多线程的。」
浏览器渲染进程有多个线程，下面来介绍浏览器的线程与其作用：
1.GUI渲染进程
GUI渲染进程做的事情其实就是上述的「关键路径渲染」，这里将不再叙述。而在了解GUI渲染进程的执行过程后，我们可以根据原理进行渲染优化：
- 尽早引入CSS文件，例如在头部引入
- 尽可能早的加载在CSS文件引入资源，例如自定义文件。可以使用预加载
- 在DOM和CSS渲染后加入JS文件，例如可以在尾部加载JS文件
2.JS引擎线程
JS引擎线程，也称为JS内核，负责处理JavaScript脚本程序。JS引擎等待着任务队列任务的到来，然后处理这些任务。无论什么时候，都只有一个JS引擎线程，因为JS是单线程的。
关于为什么JS是单线程的，这里我想用一个例子来解释一下：假如JS是多线程的，假设现在有2条线程，一条在dom节点上添加节点，另一条删除这个节点。那么问题来了，这时候该以那条线程为准。所以说，JS的主要用途就是与用户互动，操作dom节点，这就决定了JS只能是单线程的。
3.事件触发线程
事件触发线程用来控制事件循环，当对应的事件符合条件被触发时，该线程会将事件添加到待处理的事件队列中，等待JS引擎的处理。
上述已经讲到，所有的同步任务都在主线程运行，而异步任务进入任务队列。而异步任务均由事件触发线程控制，只要异步任务有了运行结果，就会在任务队列中放置回调函数，所以说异步任务一定要指定回调函数。
主线程空了，就会去读取任务队列。这个过程不断的重复，其本质基于JS的事件轮询机制。
4.定时器触发线程
JS是单线程的，当处于阻塞线程的状态会影响计时的准确性，因此需要单独开一个线程来计时。
当使用setTimeout或者setInterval时，需要定时器线程计时。计时完成后会将特定的事件推进事件触发线程的任务队列中，等待进入主线程执行。
5.异步http请求线程
XMLHttpRequest在连通后通过浏览器新起一个线程请求
检测到状态变化时，如果有设置回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中，再由JS引擎执行。