总结

• 根据html生成dom树
• 然后根据css得到节点的计算样式（节点的坐标和占用区域）
• 借助主线程遍历dom树和计算好的样式生成layout tree（布局树）,
• 遍历layout tree（布局树）生成绘制顺序表，然后主线程将layout tree和绘制顺序信息传递给合成器线程，
• 合成器线程按规则进行分图层，切割图层生成图块信息
• 将图块信息传递给栅格线程进行栅格完毕后，再返给合成器线程，生成合成器帧
• 合成器线程将合成器帧通过IPC传递给浏览器进程，浏览器进程将合成器帧传给GPU进行渲染，结束

构建DOM树

输入：我们的html结构

处理：将html结构的文本转换为浏览器可识别的dom树。

输出：dom树

dom树是什么样的？

在浏览器console中打印一个document这个就是一个dom树、

样式计算

我们的dom树有了就需要有样式的计算

输入：我们的样式源，link引入、style标签包的、内嵌的style

处理：接收到这些东西之后将我们写的样式转换为浏览器可以识别的结构-叫做styleSheet

输出：styleSheet

styleSheet是什么样的？

在浏览器console中打印一个document.styleSheet这个就是浏览器识别的样式。

布局

布局是根据dom树和styleSheet计算出元素的几何位置。

输入：dom树和styleSheet。

处理：chrome在布局阶段经历两个步骤：创建布局树和布局计算。

创建布局树，根据dom和styleSheet，不可见的元素会被移除。不包含的布局树里面。

布局计算 通过计算得到每个元素的几何位置

输出：布局树

分层

页面中有层次结构，还有3D效果，所以这里需要将页面根据层级具体分层。

输入：布局树

处理：提取出其中拥有层叠属性和会出现裁剪的元素，

输出： 图层

图层绘制

输入：图层

处理：将每个图层拆分为多个绘制指令、绘制顺序列表。

输出：绘制指令列表

栅格化操作

什么是栅格化？

是指将图块转换为位图。

输入：绘制指令列表

处理：将绘制指令列表提交给合成线程。按照视口附近的图块来优先生成位图。

输出：位图块

合成显示

输入：位图块。

处理：合成线程将位图块拿到之后，就会产生一个绘制的指令给到浏览器主线程。

输出：我们的页面、