此页面由 Cloud Translation API 翻译。

构建对象模型

Ilya Grigorik

发布时间：2014 年 3 月 31 日

浏览器渲染页面前需要先构建 DOM 和 CSSOM 树。因此，我们需要确保尽快将 HTML 和 CSS 都提供给浏览器。

摘要

字节 → 字符 → 令牌 → 节点 → 对象模型。
HTML 标记转换成文档对象模型 (DOM)；CSS 标记转换成 CSS 对象模型 (CSSOM)。
DOM 和 CSSOM 是独立的数据结构。
借助 Chrome 开发者工具的“Performance”面板，我们可以捕获和检查 DOM 和 CSSOM 的构建和处理成本。

文档对象模型 (DOM)

<!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>

试试看

让我们从可能的最简单情况入手：一个包含一些文本和一幅图片的普通 HTML 页面。浏览器如何处理此页面？

DOM 构建流程

转换：浏览器从磁盘或网络读取 HTML 的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成各个字符。
令牌化：浏览器将字符串转换成 W3C HTML5 标准规定的各种令牌（例如 <html>、<body>）以及其他尖括号内的字符串。每个令牌都具有特殊含义和一组规则。
词法分析：发出的令牌转换成定义其属性和规则的“对象”。
DOM 构建：最后，由于 HTML 标记定义了不同标记之间的关系（某些标记包含在其他标记中），因此创建的对象会以树状数据结构的形式关联起来，该数据结构还会捕获原始标记中定义的父子关系：HTML 对象是 body 对象的父级，body 是 paragraph 对象的父级，以此类推，直到构建文档的完整表示。

DOM 树

这整个过程的最终输出是我们这个简单页面的文档对象模型 (DOM)，浏览器使用该模型对页面进行所有进一步的处理。

浏览器每次处理 HTML 标记时，都会完成之前定义的所有步骤：将字节转换成字符，确定令牌，将令牌转换成节点，然后构建 DOM 树。这整个过程可能需要一些时间，尤其是在需要处理大量 HTML 的情况下。

在开发者工具中跟踪 DOM 构建

如果您打开 Chrome DevTools 并在页面加载时记录时间线，就可以看到执行该步骤实际花费的时间。在上例中，将一堆 HTML 字节转换成 DOM 树大约需要 5 毫秒。对于较大的页面，这一过程需要的时间可能会显著增加。创建流畅动画时，如果浏览器需要处理大量 HTML，这可能会成为瓶颈。

DOM 树捕获文档标记的属性和关系，但并未告诉我们元素在渲染后呈现的外观。这正是 CSSOM 的责任。

CSS 对象模型 (CSSOM)

在浏览器构建我们这个基本页面的 DOM 时，在文档的 <head> 中遇到了一个 <link> 元素，该元素引用一个外部 CSS 样式表：style.css。由于预见到需要该资源来渲染页面，它会立即发出对该资源的请求，并返回以下内容：

body {
  font-size: 16px;
}

p {
  font-weight: bold;
}

span {
  color: red;
}

p span {
  display: none;
}

img {
  float: right;
}

我们本可以直接在 HTML 标记内声明样式（内联），但让 CSS 独立于 HTML 有利于我们将内容和设计作为独立关注点进行处理：设计人员负责处理 CSS，开发者侧重于 HTML 以及其他方面。

与处理 HTML 一样，我们需要将收到的 CSS 规则转换为浏览器可以理解和使用的内容。因此，我们会重复 HTML 过程，不过是为 CSS 而不是 HTML：

CSSOM 构建步骤

CSS 字节转换成字符，接着转换成令牌和节点，最后链接到一个称为“CSS 对象模型”(CSSOM) 的树结构内：

CSSOM 树

CSSOM 为何具有树结构？在为网页上的任何对象计算最终的一组样式时，浏览器会从适用于该节点的最通用规则开始（例如，如果它是 body 元素的子元素，则应用所有 body 样式），然后通过应用更具体的规则递归地优化计算样式；也就是说，规则会“向下级联”。

以上面介绍的 CSSOM 树为例进行更具体的阐述。<span> 标记内包含的任何置于 body 元素内的文本都将字体大小为 16 像素，并且文本为红色，font-size 指令从 body 向下级联到 span。不过，如果某个 span 是某个段落 (p) 标记的子项，则其内容将不会显示。

另请注意，之前所述的树并非完整的 CSSOM 树，它只显示了我们决定在样式表中替换的样式。每个浏览器都提供一组默认样式（也称为“User Agent 样式”），即我们不提供任何自定义样式时所看到的样式，我们的样式会替换这些默认样式。

如需了解 CSS 处理所需的时间，您可以在 DevTools 中记录时间线并查找“Recalculate Style”事件：与 DOM 解析不同，该时间线不显示单独的“Parse CSS”条目，而是在这一个事件下一同捕获解析和 CSSOM 树构建，以及计算的样式的递归计算。

在开发者工具中跟踪 CSSOM 构建

我们的普通样式 Heet 需要大约 0.6 毫秒的处理时间，并且会影响页面上的 8 个元素 - 虽然不多，但同样，并不是免费的。不过，这 8 个元素从何而来呢？CSSOM 和 DOM 是独立的数据结构！结果显示，浏览器隐藏了一个重要步骤。接下来，我们将介绍将 DOM 和 CSSOM 链接起来的渲染树。

构建对象模型

摘要

文档对象模型 (DOM)

CSS 对象模型 (CSSOM)

反馈