DOM 树的构建过程：解析、CSSOM 与渲染树 - 智猿学院-IT界的百科全书

好嘞！各位观众老爷，准备好你们的咖啡☕和瓜子🍉，咱们今天要聊聊浏览器背后的“变形金刚”—— DOM 树！这玩意儿听起来玄乎，但实际上，它可是网页呈现的基石，是浏览器“化腐朽为神奇”的关键一步。今天，我就要用最轻松幽默的方式，带你深入了解 DOM 树的构建过程，以及 CSSOM 和渲染树这两个幕后英雄。

开场白：网页，从一堆代码到活色生香

想象一下，你打开一个网页，看到精美的图片，流畅的动画，还有各种各样的互动元素。这一切看起来如此自然，但你可曾想过，浏览器是怎么把一堆看似无序的代码，变成这般活色生香的景象的？就像厨师👩‍🍳把各种食材变成美味佳肴一样，浏览器也有一套自己的“烹饪”流程。而 DOM 树，就是这道大餐的骨架！

第一幕：解析，代码的“解剖”

首先，浏览器拿到的是什么？没错，就是 HTML 代码！但这堆代码，对浏览器来说，就像一堆乱麻，毫无结构可言。所以，第一步就是“解剖”这些代码，也就是解析 (Parsing)。

这个解析过程，可以想象成一个经验老道的考古学家👨‍🎓，他需要把埋在地下的文物碎片一点点挖掘出来，并且拼凑成完整的形状。浏览器内部有一个叫做 HTML 解析器 (HTML Parser) 的组件，专门负责干这事儿。

HTML 解析器会按照 HTML 的语法规则，逐行读取代码，并且把它们转换成一个个的 节点 (Node)。这些节点代表了 HTML 文档中的不同元素，比如 <html>、<head>、<body>、<div>、<p>等等。

举个例子，假设我们有如下的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <title>我的第一个网页</title>
</head>
<body>
  <h1>欢迎来到我的网站！</h1>
  <p>这是一个段落。</p>
  <img src="image.jpg" alt="一张图片">
</body>
</html>

经过 HTML 解析器的“解剖”，这些代码就会变成一系列的节点，就像下图这样：

Document
  |- HTML
      |- Head
      |    |- Title
      |         |- "我的第一个网页"
      |- Body
           |- H1
           |    |- "欢迎来到我的网站！"
           |- P
           |    |- "这是一个段落。"
           |- IMG (src="image.jpg", alt="一张图片")

这些节点之间存在着父子关系，形成了一个树状结构。这个树状结构，就是我们今天的主角—— DOM 树 (Document Object Model Tree)！

什么是 DOM？

DOM，全称是 Document Object Model，翻译过来就是“文档对象模型”。它是一个用来表示 HTML 文档的编程接口，让我们可以通过 JavaScript 来操作 HTML 元素。说白了，DOM 就是浏览器提供给我们的一个“遥控器”，让我们能够控制网页上的各种元素。

DOM 树的特点

树状结构： DOM 树是一种层次化的结构，由根节点 (Document) 开始，逐层向下延伸，形成一个树状的结构。
节点： DOM 树中的每个元素都是一个节点，包括元素节点、文本节点、属性节点等等。
动态性： DOM 树是动态的，可以通过 JavaScript 来修改 DOM 树的结构和内容，从而实现网页的动态更新。

第二幕：CSSOM，颜值的“设计师”

有了 DOM 树，我们只是有了网页的骨架，但还缺少“颜值”。网页的样式，比如颜色、字体、布局等等，都是通过 CSS 来控制的。因此，接下来，浏览器还需要解析 CSS 代码，构建 CSSOM 树 (CSS Object Model Tree)。

CSSOM 树，可以理解为网页的“化妆师”，它负责定义网页上每个元素的样式。CSSOM 树的构建过程，和 DOM 树类似，也是通过解析 CSS 代码，将其转换成一个个的 样式规则 (Style Rule)，然后按照 CSS 的选择器规则，将这些样式规则应用到 DOM 树的相应节点上。

举个例子，假设我们有如下的 CSS 代码：

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: blue;
  text-align: center;
}

p {
  font-size: 16px;
  line-height: 1.5;
}

经过 CSS 解析器的“加工”，这些代码就会变成一系列的样式规则，并最终构建成 CSSOM 树。虽然我们看不到 CSSOM 树的具体结构，但可以想象它就像一个庞大的样式表，记录了每个元素的样式信息。

CSSOM 树的构建时机

需要注意的是，CSSOM 树的构建可能会阻塞页面的渲染。因为浏览器需要先构建好 CSSOM 树，才能知道每个元素的样式，从而正确地渲染页面。因此，在编写 CSS 代码时，应该尽量避免使用复杂的选择器，减少 CSS 文件的体积，从而加快 CSSOM 树的构建速度。

第三幕：渲染树，骨架和颜值的“合体”

有了 DOM 树和 CSSOM 树，我们终于可以开始“组装”网页了！这一步，就是把 DOM 树和 CSSOM 树合并成一棵 渲染树 (Render Tree)。

渲染树包含了所有需要渲染的元素，以及它们的样式信息。注意，渲染树并不等于 DOM 树，也不是简单的 DOM 树 + CSSOM 树。渲染树会忽略一些不需要渲染的元素，比如 display: none 的元素，以及 head 元素。

渲染树的构建过程

遍历 DOM 树： 从 DOM 树的根节点开始，逐个遍历 DOM 树中的每个节点。
应用 CSS 规则： 对于每个节点，根据 CSSOM 树中的样式规则，确定该节点的样式。
创建渲染对象： 如果该节点需要渲染，则创建一个对应的 渲染对象 (Render Object)。渲染对象包含了该节点的样式信息、几何信息等等。
添加到渲染树： 将渲染对象添加到渲染树中，形成一个树状结构。

渲染树构建完成后，浏览器就可以根据渲染树来计算每个元素的位置和大小，然后将它们绘制到屏幕上。

举个例子

假设我们有如下的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <title>我的第一个网页</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }

    h1 {
      color: blue;
      text-align: center;
    }

    p {
      font-size: 16px;
      line-height: 1.5;
    }

    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <h1>欢迎来到我的网站！</h1>
  <p>这是一个段落。</p>
  <div class="hidden">这个元素不会被渲染。</div>
  <img src="image.jpg" alt="一张图片">
</body>
</html>

经过 DOM 树、CSSOM 树的构建，以及渲染树的合并，最终的渲染树可能如下所示：

RenderView (对应 Document 节点)
  |- RenderBody (对应 Body 节点)
      |- RenderH1 (对应 H1 节点)
      |    |- RenderText (对应 "欢迎来到我的网站！" 文本节点)
      |- RenderP (对应 P 节点)
      |    |- RenderText (对应 "这是一个段落。" 文本节点)
      |- RenderImage (对应 IMG 节点)

可以看到，div.hidden 元素由于 display: none 的设置，没有出现在渲染树中。

渲染流程的总结

用一张表格来总结一下整个渲染流程：

步骤	描述	涉及的技术	影响性能的关键点
解析 HTML	将 HTML 代码解析成 DOM 树	HTML 解析器	避免 HTML 结构错误，减少解析时间
解析 CSS	将 CSS 代码解析成 CSSOM 树	CSS 解析器	避免复杂的 CSS 选择器，减少 CSS 文件体积
构建渲染树	将 DOM 树和 CSSOM 树合并成渲染树，忽略不需要渲染的元素	DOM API, CSSOM API	减少需要渲染的元素数量，避免频繁修改 DOM 树
布局	根据渲染树计算每个元素的位置和大小	布局引擎 (Layout Engine)	避免频繁的布局计算 (Layout Thrashing)
绘制	将渲染树中的元素绘制到屏幕上	渲染引擎 (Rendering Engine)	优化绘制过程，减少重绘 (Repaint) 和重排 (Reflow)

重绘 (Repaint) 和重排 (Reflow)

在渲染过程中，如果页面的某些元素发生了变化，浏览器就需要重新绘制这些元素。这个过程叫做 重绘 (Repaint)。

如果元素的位置和大小发生了变化，浏览器不仅需要重新绘制这些元素，还需要重新计算它们的位置和大小，以及它们周围的元素的位置和大小。这个过程叫做 重排 (Reflow)，也叫做 回流 (Reflow)。

重排是一个非常耗费性能的操作，因为它会导致整个页面的重新布局。因此，在编写代码时，应该尽量避免触发重排。

如何避免重排？

批量修改 DOM： 尽量一次性修改多个 DOM 元素，而不是逐个修改。
使用 documentFragment： 可以先将需要修改的 DOM 元素添加到 documentFragment 中，然后再将 documentFragment 添加到 DOM 树中。
避免频繁访问布局属性： 比如 offsetWidth、offsetHeight 等等。
使用 transform 代替 top、left： transform 不会触发重排。

结尾：DOM 树，幕后英雄的赞歌

好了，各位，今天我们一起走了一趟 DOM 树的构建之旅，了解了 HTML 解析器、CSS 解析器、渲染树等等幕后英雄。 DOM 树是网页呈现的基石，理解 DOM 树的构建过程，可以帮助我们更好地优化网页性能，提升用户体验。

希望今天的讲解，能够让你对浏览器的工作原理有更深入的了解。记住，每一个精美的网页，背后都有无数的工程师默默付出，他们才是真正的“变形金刚”！

下次再见，祝各位代码写得飞起，Bug 永远消失！ 🚀

发表回复 取消回复

发表回复取消回复