浏览器渲染页面过程小计

1 构建 DOM 树

 HMTL 词法语法分析，转成对应的 AST 树

2 样式计算

把 CSS 转换为浏览器能够理解的结构，可以通过 document.styleSheets 查看
格式化样式属性，例如：rem -> px、white -> #FFFFFF 等
计算每个节点样式属性：根据 CSS 选择器与 DOM 树共同构建 render 树

3 生成布局树

这里去除一些 display: none 等隐藏样式的元素，因为它们不在 render 树中

4 建立图层树（分层）

主要分为「显式合成」和「隐式合成」
     当重绘时就只需要重绘当前图层

5 图层绘制

将图层树转换成绘制的指令列表

6 栅格化(光栅化)

所谓栅格化，就是将图块转换为位图。
绘制列表交付给合成线程，进行图层分块，也就是划分图块。
渲染进程中专门维护了一个栅格化线程池，专门负责把图块交由 GPU 渲染
GPU 渲染后将位图信息传递给合成线程，合成线程将位图信息在显示器显示

7 合成和显示