浏览器的渲染流程

渲染主线程

1.渲染主线程接到绘制任务，开始解析html和css。生成dom树和cssom树。

2.样式解析，遍历dom树，给每一个节点添加样式，生成带样式的dom树。

3.布局,利用带样式的dom树生成布局树，布局树携带位置信息，布局树和dom树不是完全一致，布局树不包含display：none的元素，包含伪元素。

4.分层，对布局信息进行分层，提高浏览器的渲染效率。若某一个层布局发生改变只会重新渲染当前层。

5.生成绘制指令。遍历所有层，生成绘制指令集。

6.分块,将每一个层分成若干个小块，这个阶段合成线程会调度其他辅助线程帮助完成。

7.光栅化，对分块后的每一个部分进行处理，利用布局信息生成位图。靠近视口位置块的优先处理。

8.绘制，合成线程将位图转给GPU进行绘制。