Google Chrome/web.dev 项目解析：关键渲染路径之渲染树构建与布局绘制

前言

在现代Web开发中，理解浏览器如何将HTML、CSS和JavaScript转换为用户可见的像素是优化页面性能的关键。本文将深入解析浏览器渲染过程中的核心环节——渲染树构建、布局计算和绘制过程，帮助开发者掌握关键渲染路径优化的核心原理。

渲染树：DOM与CSSOM的结合体

当浏览器接收到HTML和CSS资源后，会分别构建DOM（文档对象模型）树和CSSOM（CSS对象模型）树。但这两个模型是相互独立的：

• DOM树描述页面内容结构
• CSSOM树描述元素样式规则

渲染树（Render Tree） 正是这两者的结合产物，它只包含需要在屏幕上显示的内容及其样式信息。

渲染树构建过程

1. 遍历DOM树：从根节点开始，识别所有可见节点

   • 忽略<script>、<meta>等不可见标签
   • 过滤CSS设置为display: none的元素

2. 应用样式规则：为每个可见节点匹配对应的CSSOM规则

3. 生成渲染树：输出带有内容和计算样式的可见节点集合

重要区别：visibility: hidden会使元素不可见但仍占据布局空间，而display: none会完全从渲染树中移除元素。

布局（Layout/Reflow）阶段

有了渲染树后，浏览器需要计算每个元素在设备视口中的精确位置和尺寸，这个过程称为布局或回流。

布局计算示例

考虑以下HTML结构：

<div style="width: 50%">
  <div style="width: 50%">Hello world!</div>
</div>

布局计算过程：

1. 外层div宽度 = 视口宽度的50%
2. 内层div宽度 = 父元素宽度的50%（即视口宽度的25%）

最终输出的是盒模型数据，将所有相对单位转换为屏幕上的绝对像素值。

绘制（Paint）阶段

在了解每个元素的几何信息后，浏览器将渲染树节点转换为实际屏幕像素。这个阶段也称为光栅化，包含两个子过程：

1. 绘制设置（Paint Setup）：准备绘制环境
2. 绘制（Paint）：实际将像素绘制到屏幕

性能影响因素

整个渲染流程的耗时取决于：

• 文档规模：节点数量越多，计算越复杂
• 样式复杂度：简单样式（如纯色）绘制快，复杂效果（如阴影）计算成本高
• 设备性能：不同硬件处理能力差异

关键渲染路径优化

优化关键渲染路径的目标是最小化以下步骤的总耗时：

1. 构建DOM树
2. 构建CSSOM树
3. 合并为渲染树
4. 计算布局
5. 执行绘制

通过减少这些步骤的工作量或优化执行顺序，可以实现：

• 更快的首次内容渲染
• 更高的交互内容刷新率

开发者工具观察

现代浏览器开发者工具（如Chrome DevTools）可以直观展示这些阶段：

• Layout事件：记录渲染树构建和几何计算
• Paint事件：显示绘制过程

总结

理解渲染树构建、布局和绘制过程是Web性能优化的基础。通过控制DOM复杂度、优化CSS选择器、减少不必要的布局重排等措施，开发者可以显著提升页面渲染性能，为用户提供更流畅的浏览体验。