DOM 树的理解

问题

什么是 DOM 树，它是如何生成的？

解答

什么是 DOM

DOM（Document Object Model）是渲染引擎将 HTML 字节流转化后的内部数据结构。浏览器无法直接理解网络传输的 HTML 字节流，需要将其转换为 DOM 这种结构化的表述。

DOM 在渲染引擎中有三个作用：

页面视角：DOM 是生成页面的基础数据结构。

JavaScript 视角：DOM 提供了操作接口，JavaScript 可以通过这些接口访问和修改文档的结构、样式和内容。

安全视角：DOM 是一道安全防护线，在解析阶段过滤不安全的内容。

DOM 树的生成过程

HTML 解析器（HTMLParser）负责将 HTML 字节流转换为 DOM 结构。网络进程和渲染进程之间通过共享数据通道传输数据，网络进程加载多少数据就传给 HTML 解析器多少数据。

生成过程分为三个阶段：

1. 字节流转 Token

分词器将字节流转换为 Token，分为 Tag Token（标签）和文本 Token。

2. Token 解析为 DOM 节点

将 Token 解析成对应的 DOM 节点对象。

3. DOM 节点添加到 DOM 树

将生成的节点按照层级关系组装成 DOM 树。

JavaScript 对 DOM 生成的影响

内嵌脚本

当 HTML 解析器遇到 <script> 标签时，会暂停 DOM 解析，因为 JavaScript 可能会修改已生成的 DOM 结构。JavaScript 引擎执行完脚本后，HTML 解析器才会恢复解析。

外部脚本

遇到外部 JavaScript 文件时，同样会暂停 DOM 解析，但需要先下载脚本文件，下载完成后再执行，执行完毕后恢复解析。

关键点

• DOM 是浏览器将 HTML 转换后的内部数据结构，连接了页面和 JavaScript
• DOM 生成经历三个阶段：字节流 → Token → DOM 节点 → DOM 树
• JavaScript 会阻塞 DOM 解析，因为脚本可能修改 DOM 结构
• 外部脚本需要先下载再执行，会延长 DOM 生成时间