05 宏观下的浏览器：渲染阶段——HTML、CSS和JavaScript是如何变成页面的？

1.渲染流水线

2.构建DOM树

3.样式计算

4.布局阶段

5.分层

1.渲染流水线

1. 构建 DOM 树：将HTML内容转换为DOM树结构
2. 样式计算：将CSS样式表转换为浏览器可以理解的styleSheets，计算DOM节点的样式
3. 布局阶段：创建布局树，并计算元素的布局信息
4. 分层：对布局树进行分层，生成分层树
5. 绘制：为每个图层生成绘制列表，并将其提交到合成线程
6. 分块：合成线程将图层分成图块
7. 光栅化：在光栅话线程池中将图块转换为位图
8. 合成：合成线程发送绘制图块命令DrawQuad给浏览器进程，浏览器进程根据DrawQuad生成页面并显示。

2.构建DOM树

即开发者工具的 Element。

3.样式计算

1. 将 CSS 转换为浏览器能够理解的结构
2. 转换样式表中的属性值，使其标准化
3. 计算出DOM树中每个节点的具体样式

3-1 将 CSS 转换为浏览器能够理解的结构

渲染引擎接收到css文本，会执行一个转换操作，会执行一个转化操作，将css文本转换为浏览器可以理解的结构——styleSheets。document.styleSheets可以查看。

3-2 转换样式表中的属性值，使其标准化

3-3 计算出DOM树中每个节点的具体样式

• css继承规则：每个DOM节点都包含有父节点的样式
  
  都继承了body的 font-size： 20px

• 层叠规则：定义了如何合并来自多个源的属性值的算法（权重大的就覆盖权重小的）

4.布局阶段

1. 创建布局树
2. 布局计算

4-1 创建布局树

1. 遍历DOM中所有的可见节点，把这些节点加到新创建的布局树中
2. 不可见的节点被布局树忽略掉，如head标签，display:none的标签。

4-2 布局计算

• 计算每个元素的几何坐标位置，将这些信息保存在布局树中。

5.分层

• 为了实现页面中一些复杂的效果：3D变换、页面滚动、z-index做z轴排序等等，渲染引擎为特定的节点生成专业的突出，形成一个图层树（LayerTree）
• 类似 photoshop 的图层
• 拥有层叠上下文的元素会被提升为单独的一层（如定位、opacity、z-index）
• 需要裁剪（clip）的地方会被创建为图层