一、浏览器渲染引擎
1、主要模块
- 一个渲染引擎主要包括：HTML解析器，CSS解析器，javascript引擎，布局layout模块，绘图模块。
- HTML解析器：解释HTML文档的解析器，主要作用是将HTML文本解释成DOM树。
- CSS解析器：它的作用是为DOM中的各个元素对象计算出样式信息，为布局提供基础设施
- Javascript引擎：使用Javascript代码可以修改网页的内容，也能修改css的信息，javascript引擎能够解释javascript代码，并通过DOM接口和CSS树接口来修改网页内容和样式信息，从而改变渲染的结果。
- 布局（layout）：在DOM创建之后，Webkit需要将其中的元素对象同样式信息结合起来，计算他们的大小位置等布局信息，形成一个能表达这所有信息的内部表示模型
- 绘图模块（paint）：使用图形库将布局计算后的各个网页的节点绘制成图像结果
Ps：文档对象模型（Document Object Model，简称DOM）
2、渲染过程
- 浏览器渲染页面的整个过程：浏览器会从上到下解析文档。
- 遇见 HTML 标记，调用HTML解析器解析为对应的 token （一个token就是一个标签文本的序列化）并构建 DOM 树（就是一块内存，保存着tokens，建立它们之间的关系）。
- 遇见 style/link 标记 调用解析器 处理 CSS 标记并构建 CSS样式树。
- 遇见 script 标记 调用 javascript解析器 处理script标记，绑定事件、修改DOM树/CSS树 等
- 将 DOM树 与 CSS树 合并成一个渲染树。
- 根据渲染树来渲染，以计算每个节点的几何信息（这一过程需要依赖图形库）。
- 将各个节点绘制到屏幕上。
二、阻塞渲染
1.关于css阻塞：
声明：只有link引入的外部css才能够产生阻塞。
1).style标签中的样式：
(1). 由html解析器进行解析；
(2). 不阻塞浏览器渲染（可能会产生“闪屏现象”）；
(3). 不阻塞DOM解析；
2).link引入的外部css样式（推荐使用的方式）：
(1). 由CSS解析器进行解析。
(2). 阻塞浏览器渲染(可以利用这种阻塞避免“闪屏现象”)。
(3). 阻塞其后面的js语句的执行：
(4). 不阻塞DOM的解析：
3).优化核心理念：尽可能快的提高外部css加载速度
(1).使用CDN节点进行外部资源加速。
(2).对css进行压缩(利用打包工具，比如webpack,gulp等)。
(3).减少http请求数，将多个css文件合并。
(4).优化样式表的代码
2.关于js阻塞：
1).阻塞DOM解析:
原因：浏览器不知道后续脚本的内容，如果先去解析了下面的DOM，而随后的js删除了后面所有的DOM，
那么浏览器就做了无用功，浏览器无法预估脚本里面具体做了什么操作，例如像document.write
这种操作，索性全部停住，等脚本执行完了，浏览器再继续向下解析DOM。
2).阻塞页面渲染:
原因：js中也可以给DOM设置样式，浏览器同样等该脚本执行完毕，再继续干活，避免做无用功。
3).阻塞后续js的执行:
原因：维护依赖关系，例如：必须先引入jQuery再引入bootstrap
3.备注
【备注1】：css的解析和js的执行是互斥的（互相排斥），css解析的时候js停止执行，js执行的时候css停止解析。
【备注2】：无论css阻塞，还是js阻塞，都不会阻塞浏览器加载外部资源（图片、视频、样式、脚本等）
原因：浏览器始终处于一种：“先把请求发出去”的工作模式，只要是涉及到网络请求的内容，
无论是：图片、样式、脚本，都会先发送请求去获取资源，至于资源到本地之后什么时候用，
由浏览器自己协调。这种做法效率很高。
【备注3】：WebKit 和 Firefox 都进行了【预解析】这项优化。在执行js脚本时，浏览器的其他线程会解析文档的其余部分，
找出并加载需要通过网络加载的其他资源。通过这种方式，资源可以在并行连接上加载，
从而提高总体速度。请注意，预解析器不会修改 DOM 树
三、图层重拍与重绘
1.css图层
浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。
在渲染DOM的时候，浏览器所做的工作实际上是：
1. 获取DOM后分割为多个图层
2. 对每个图层的节点计算样式结果 （Recalculate style--样式重计算）
3. 为每个节点生成图形和位置 （Layout--重排,回流）
4. 将每个节点绘制填充到图层位图中 （Paint--重绘）
5. 图层作为纹理上传至GPU
6. 组合多个图层到页面上生成最终屏幕图像 （Composite Layers--图层重组）
2.图层创建的条件
Chrome浏览器满足以下任意情况就会创建图层：
1. 拥有具有3D变换的CSS属性
2. 使用加速视频解码的<video>节点
3. <canvas>节点
4. CSS3动画的节点
5. 拥有CSS加速属性的元素(will-change)
3.重绘(Repaint)
重绘是一个元素外观的改变所触发的浏览器行为，例如改变outline、背景色等属性。浏览器会根据元素的新属性重新绘制，
使元素呈现新的外观。重绘不会带来重新布局，所以并不一定伴随重排。
需要注意的是：重绘是以图层为单位，如果图层中某个元素需要重绘，那么整个图层都需要重绘。
比如一个图层包含很多节点，其中有个gif图，gif图的每一帧，都会重回整个图层的其他节点，然后生成最终的图层位图。
所以这需要通过特殊的方式来强制gif图属于自己一个图层（translateZ(0)或者translate3d(0,0,0)
CSS3的动画也是一样（好在绝大部分情况浏览器自己会为CSS3动画的节点创建图层）
4.重排(Reflow 回流)
渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排
"重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。
但是，"重排"必然导致"重绘"，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。
5.触发重绘的属性
* color * background * outline-color
* border-style * background-image * outline
* border-radius * background-position * outline-style
* visibility * background-repeat * outline-width
* text-decoration * background-size * box-shadow
6.触发重排(回流)的属性
盒子模型相关属性会触发重布局 定位属性及浮动也会触发重布局： 改变节点内部文字结构也会触发重布局：
* width * top * text-align
* height * bottom * overflow-y
* padding * left * font-weight
* margin * right * overflow
* display * position * font-family
* border-width * float * line-height
* border * clear * vertival-align
* min-height * white-space
7.常见的触发重排的操作
Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，
一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么，
但是如果 reflow 发生在手机上，那么这个过程是非常痛苦和耗电的。
所以，下面这些动作有很大可能会是成本比较高的。
当你增加、删除、修改 DOM 结点时，会导致 Reflow , Repaint。
当你移动 DOM 的位置
当你修改 CSS 样式的时候。
当你 Resize 窗口的时候（移动端没有这个问题，因为移动端的缩放没有影响布局视口）
当你修改网页的默认字体时。
获取某些属性时(width,height...)
注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发生位置变化。
8.优化方案
如果我们需要使得动画或其他节点渲染的性能提高，需要做的就是减少浏览器在运行时所需要做的工作（尽量减少1234步）
1. 计算需要被加载到节点上的样式结果（Recalculate style--样式重计算）
2. 为每个节点生成图形和位置（Layout--回流和重布局）
3. 将每个节点填充到图层中（Paint Setup和Paint--重绘）
4. 组合图层到页面上（Composite Layers--图层重组）
1.元素位置移动变换时尽量使用CSS3的transform来代替对top left等的操作
变换（transform）和透明度（opacity）的改变仅仅影响图层的组合
2.使用opacity来代替visibility
(1).使用visibility不触发重排，但是依然重绘。
(2).直接使用opacity即触发重绘，又触发重排（GPU底层设计如此！）。
(3).opacity配合图层使用，即不触发重绘也不触发重排。
原因：
透明度的改变时，GPU在绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果，并不需要整体的重绘。
不过这个前提是这个被修改opacity本身必须是一个图层。
3.不要使用table布局
table-cell
4.将多次改变样式属性的操作合并成一次操作
不要一条一条地修改DOM的样式，预先定义好class，然后修改DOM的className
5.将DOM离线后再修改
由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。
如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。
6.利用文档碎片(documentFragment)------vue使用了该种方式提升性能。
7.不要把获取某些DOM节点的属性值放在一个循环里当成循环的变量
当你请求向浏览器请求一些 style信息的时候，就会让浏览器flush队列，比如：
1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop/Left/Width/Height
3. clientTop/Left/Width/Height
4. width,height
当你请求上面的一些属性的时候，浏览器为了给你最精确的值，需要刷新内部队列，
因为队列中可能会有影响到这些值的操作。即使你获取元素的布局和样式信息跟最近发生或改变的布局信息无关，
浏览器都会强行刷新渲染队列。
8.动画实现过程中，启用GPU硬件加速:transform: tranlateZ(0)
9.为动画元素新建图层,提高动画元素的z-index
9、requestAnimationFrame----请求动画帧
requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
-
requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
-
在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
window.requestAnimationFrame() 1.window.requestAnimationFrame() 说明：该方法会告诉浏览器在重绘之前调用你所指定的函数 1.参数：该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。 回调函数会被自动传入一个参数，DOMHighResTimeStamp，标识requestAnimationFrame()开始触发回调函数的当前时间
2.返回值： 一个long整数，也成为请求 ID，是个非零值 ，是回调列表中唯一的标识，没别的意义。 2.window.cancelAnimationFrame(requestID) 取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求。 requestID是先前调用window.requestAnimationFrame()方法时返回的ID.
