浏览器渲染原理

1.浏览器渲染原理

1.主线程

1.解析html

• 在当前阶段，html 将被解析成DOM树与CSSOM树；

2.计算样式

• 在当前阶段，遍历DOM树，结合CSSOM树，依次为每个节点计算出最终样式，即 Computed Style；
• reflow 发生在当前阶段，若是出现 reflow，必然导致 repaint 发送；

3.布局

• 在当前阶段，遍历DOM树，计算每个节点的几何信息，生成相应的布局树，需要注意的是，DOM树与布局树并不一定是一一对应的；

4.分层

• repaint 可能发生在当前阶段；
• 滚动条、堆叠上下文、transform、opacity 等样式属性都会或多或少的影响分层结果，也可以通过 will-change 属性来更大程度的影响分层结果；

5.生成绘制指令

• repaint 可能发生在当前阶段；
• 主线程会为每一层单独生成绘制指令集，用于描述这一层该如何绘制、渲染；

2.合成线程

1.分块

• 分块的工作是交由多个线程同时进行的，可以通过任务管理器提取浏览器进程信息进行验证查看；
• 分块的工作是将每一层，分成多个小的区域，以便后续可以根据不同的优先级进行绘制、提高绘制效率；

2.光栅化

• 光栅化的工作，实际上是通过合成线程，交由GPU进程来实现的，GPU进程会开启多个线程来完成光栅化，并且会优先处理靠近视口区域的块；

3.真实绘制

• transform 发生在合成线程，而不是主线程，这就是 transform 效率高的本质原因；