Google Chrome/web.dev 项目解析：关键渲染路径之对象模型构建
2025-07-09 06:13:39作者：昌雅子Ethen
前言
在浏览器渲染页面的过程中，构建DOM和CSSOM树是至关重要的前置步骤。本文将深入解析浏览器如何将HTML和CSS转换为可操作的对象模型，帮助开发者理解这一关键渲染路径的核心机制。
对象模型构建流程概述
浏览器处理HTML和CSS的过程可以概括为以下阶段：
- 字节 → 字符 → 标记 → 节点 → 对象模型
- HTML标记转换为文档对象模型(DOM)
- CSS标记转换为CSS对象模型(CSSOM)
- DOM和CSSOM是独立的数据结构
文档对象模型(DOM)构建详解
示例HTML文档
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
DOM构建四步曲
-
转换(Conversion)
- 浏览器从磁盘或网络读取HTML原始字节
- 根据文件编码规范(如UTF-8)将字节转换为字符
-
标记化(Tokenizing)
- 将字符流转换为有意义的标记
- 根据W3C HTML5标准识别""、""等标签
-
词法分析(Lexing)
- 将标记转换为定义其属性和规则的对象
-
DOM构建
- 根据HTML标记定义的父子关系
- 将对象链接成树形数据结构
- 例如：HTML对象是body对象的父级，body是段落对象的父级等
DOM树结构示例
最终构建的DOM树反映了文档标记的属性和关系，浏览器后续处理都基于这个DOM树。
性能考量
DOM构建过程需要时间，特别是处理大量HTML时：
- 示例中约5ms完成转换
- 大型页面可能需要更长时间
- 在动画场景中可能成为性能瓶颈
CSS对象模型(CSSOM)构建
当浏览器构建DOM时遇到CSS链接，会立即请求该资源：
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
CSS处理流程
与HTML类似但针对CSS：
- CSS字节转换为字符
- 字符转换为标记
- 标记转换为节点
- 节点链接成CSSOM树结构
CSSOM树特性
- 层级结构原因：浏览器计算元素最终样式时，从最通用规则开始，递归应用更具体规则（层叠）
- 示例说明：
- body内的span文本：16px字体、红色
- p内的span：内容不显示
- 默认样式：浏览器提供"用户代理样式"，我们的样式会覆盖这些默认值
性能监测
通过开发者工具可以观察到：
- "Recalculate Style"事件包含解析和CSSOM树构建
- 示例样式表处理约0.6ms，影响8个元素
DOM与CSSOM的关系
虽然DOM和CSSOM是独立构建的，但浏览器会在两者之间建立关联，形成渲染树。这个关键步骤将视觉样式与文档结构结合起来，为最终页面渲染做准备。
总结
理解DOM和CSSOM的构建过程对于优化网页性能至关重要。通过开发者工具监测这些过程，开发者可以识别潜在的性能瓶颈，并采取相应优化措施，如：
- 精简HTML和CSS
- 减少嵌套层级
- 合理组织样式规则
- 避免阻塞渲染的关键资源
掌握这些基础知识，将帮助开发者构建更高效、响应更快的网页应用。
