渲染时间点

渲染流水线

1.解析HTML

解析CSS

HTML解析过程中遇到CSS代码怎么办?

HTML解析过程中遇到JS代码怎么办?

渲染主线程遇到 JS 时必须暂停一切行为，等待下载执行完后才能继续预解析线程可以分担一点下载 JS 的任务

因为JS代码有可能会改动当前的DOM!

第一步完成后就会生成DOM(Document Object Model)树和CSSOM(CSS Object Model)树

2.样式计算

主线程会遍历得到的 DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 Computed Style

在这一过程中，很多预设值会变成绝对值，比如red会变成rgb(255,0,0);相对单位会变成绝对单位，比
如 em 会变成 px

这一步完成后，会得到一棵带有样式的 DOM 树

3.布局

布局阶段会依次遍历 DOM 树的每一个节点，计算每个节点的几何信息。例如节点的宽高、相对包含块的位查
大部分时候，DOM 树和布局树并非一一对应
比如 display:none 的节点没有几何信息，因此不会生成到布局树;又比如使用了伪元素选择器，虽然 DOM树中不存在这些伪元素节点，但它们拥有几何信息，所以会生成到布局树中。还有匿名行盒、匿名块盒等等都会导致 DOM 树和布局树无法一一对应

DOM树和Layout树不一定是一一对应的

4.分层

主线程会使用一套复杂的策略对整个布局树中进行分层

分层的好处在于，将来某一个层改变后，仅会对该层进行后续处理，从而提升效率。滚动条、堆叠上下文、transform、opacity 等样式都会或多或少的影响分层结果，也可以通过 will-change 属性更大程度的影响分层结果

以百度首页为例感受一下

F12控制台 -> More Tools -> Layers

5.绘制

这里的绘制 是为每一层生成如何绘制的指令

例子:

将笔移动到 10,30 位置画一个200*300 的矩形 用红色填充矩形
有点像canvas!

渲染主线程的工作剩此为止，剩余步骤交给其他线程完成!

6.分块

分块会将每一层分为多个小区域 是交给多个线程同时进行的

7.光栅化

光栅化是将每个块变成位图 (像素块的信息)
优先处理靠近视口的块

8.画

合成线程计算出每个位图在屏幕上的位置，交给GPU进行最终呈现

完整过程

什么是reflow?

reflow 的本质就是重新计算 layout 树

当进行了会影响布局树的操作后，需要重新升算布局树，会引发Layout

为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算
所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即 reflow

什么是repaint?

repaint 的本质就是重新根据分层信息计算了绘制指令
当改动了可见样式后，就需要重新计算，会引发repaint
由于元素的布局信息也属于可见样式，所以reflow 一定会引起 repaint

为什么transform效率高?