渲染流程： HTML,CSS,JavaScript 是如何变成页面的？

渲染流程： HTML,CSS,JavaScript 是如何变成页面的？

构建 DOM 树

1. 输入：HTML 文档；
2. 处理：HTML 解析器解析；
3. 输出：DOM 数据解构。

样式计算

处理CSS 文本，属性值标准化，每个节点具体样式（继承、层叠），生成styleSheets(CSSOM)

布局(DOM 树中元素位置)

1. DOM & CSSOM 合并成渲染树；
2. 布局树（DOM 树中的可见元素）；
3. 布局计算。

分层

1. 特定节点生成专用图层，生成一棵图层树；
2. 拥有层叠上下文属性（明确定位属性、透明属性、CSS 滤镜、z-index 等）的元素会创建单独图层；
3. 没有图层的 DOM 节点属于父节点图层；
4. 需要剪裁的地方也会创建图层。
   

绘制指令

渲染引擎对图层树中每个图层进行绘制，拆分成绘制指令，生成绘制列表，提交到合成线程；

分块（tiles）

合成线程会将较大、较长的图层（一屏显示不完，大部分不在视口内）划分为图块（tile, 256256, 512512）。

栅格化（raster）操作

1. 在栅化线程池中，将视口附近的图块优先生成位图（栅格化执行该操作）；
2. 快速栅格化：GPU 加速，生成位图（GPU 进程）。
   

合成绘制

1. 绘制图块命令——DrawQuad，提交给浏览器进程；
2. 浏览器进程的 viz 组件，根据DrawQuad命令，绘制在屏幕上。

相关概念

重排

1. 更新了元素的几何属性（如宽、高、边距）；
2. 触发重新布局，解析之后的一系列子阶段；
3. 更新完成的渲染流水线，开销最大。
   

重绘

1. 更新元素的绘制属性（元素的颜色、背景色、边框等）；
2. 布局阶段不会执行（无几何位置变换），直接进入绘制阶段。
   

合成

1. 直接进入合成阶段（例如CSS 的 transform 动画）；
2. 直接执行合成阶段，开销最小。