此页面由 Cloud Translation API 翻译。

构建对象模型

Ilya Grigorik

发布时间：2014 年 3 月 31 日

浏览器要渲染网页，需要先构建 DOM 并 CSSOM 树。因此，我们需要确保同时提供 HTML 和尽快将 CSS 推送到浏览器。

摘要

字节 → 字符 → 令牌 → 节点 → 对象模型。
将 HTML 标记转换为文档对象模型 (DOM)；CSS 标记是转换为 CSS 对象模型 (CSSOM)。
DOM 和 CSSOM 是独立的数据结构。
Chrome DevTools 的“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 开发者工具并在网页加载时记录时间轴，您可以看到完成该步骤实际所花的时间。在上一个示例中，将一段 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 元素的子元素，则应用所有正文样式），然后以递归方式优化计算的样式应用更具体的规则也就是说，规则会“向下级联”。

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

另请注意，前面描述的树并非完整的 CSSOM 树，仅显示我们决定在样式表中替换的样式。所有浏览器提供了一组默认的样式，也称为“用户代理样式”，在不提供任何自定义值时看到的结果 - 我们的样式会覆盖这些默认值。

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

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

我们的小样式表需要大约 0.6 毫秒的处理时间，影响页面上的 8 个元素 - 虽然不多，但同样会产生开销。然而，在哪里这八个元素来自哪里？CSSOM 和 DOM 是独立的数据结构！结果证明，浏览器隐藏了一个重要步骤。接下来，我们将介绍将 DOM 和 CSSOM 链接起来的渲染树。

构建对象模型

摘要

文档对象模型 (DOM)

CSS 对象模型 (CSSOM)

反馈