3.DOM Tree 与 CSSOM · BAT web前端开发面试宝典

## DOM 树（Document Object Model Tree） ### 定义和基本概念 DOM 树是 HTML 文档的内存表示，它将文档结构化为一个逻辑树。每个 HTML 元素、属性和文本片段都成为树中的一个节点。DOM 提供了一个编程接口，允许开发者通过脚本语言（如 JavaScript）动态地访问和操作网页内容和结构。 ### DOM 树的形成过程 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fdccc595da35492d9d436b6020b978e9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv5b6Q5b6Q:q75.awebp?rk3s=f64ab15b&x-expires=1759193154&x-signature=96wLR4WI5A%2Fbqq%2F5KSYW87mnE%2Bs%3D) 1. **字节流解析** ：浏览器从服务器接收 HTML 文件的字节流。 2. **字符识别**：将字节流转换为字符。 3. **令牌化**：将字符串转换为定义的令牌（如、等）。 4. **节点生成**：根据令牌创建节点。 5. **DOM 树构建**：将节点连接成一个树状结构。例如，考虑以下 HTML： ~~~ html 体验AI代码助手代码解读复制代码<html> <head> <title> 示例页面 </title> </head> <body> <h1> 欢迎 </h1> <p> 这是一个段落。</p> </body> </html> ~~~ 这段 HTML 将被解析成如下的 DOM 树结构： ~~~ less 体验AI代码助手代码解读复制代码Document └── html ├── head │ └── title │ └── #text: 示例页面 └── body ├── h1 │ └── #text: 欢迎 └── p └── #text: 这是一个段落。 ~~~ ### DOM 树的内部结构每个 DOM 节点通常包含以下信息： * nodeType（节点类型，如元素、文本、注释等） * nodeName（节点名称） * nodeValue（节点值） * parentNode（父节点） * childNodes（子节点列表） * attributes（属性列表，仅适用于元素节点） ### DOM 操作的性能考虑频繁的 DOM 操作可能导致性能问题，因为每次修改都可能触发重排（reflow）或重绘（repaint）。为提高性能，可以： * 使用文档片段（DocumentFragment）批量操作 DOM。 * 离线操作 DOM（如先从 DOM 树上移除元素，修改后再插入）。 * 使用虚拟 DOM 技术（如 React 和 Vue 采用的方法）。 ## CSSOM（CSS Object Model） ### CSSOM 的定义和作用 CSSOM 是 CSS 的对象表示，它将样式信息转换为浏览器可以理解和处理的结构。CSSOM 与 DOM 树并行构建，最终合并形成渲染树。 ### CSSOM 的构建过程 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0632940092a84b39a25e3e99b6bca677~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv5b6Q5b6Q:q75.awebp?rk3s=f64ab15b&x-expires=1759193154&x-signature=Ypl0OY7tT7tVu6d1E7tfZpXAUmo%3D) 1. **字节流解析** ：与 HTML 类似，CSS 文件首先被解析为字节流。 2. **字符识别**：将字节流转换为字符。 3. **令牌化** ：将字符串转换为定义的令牌（如选择器、属性、值等）。 4. **节点生成** ：根据令牌创建 CSSOM 节点。 5. **CSSOM 树构建** ：将节点连接成树状结构，计算样式。 ### CSSOM 的内部结构 CSSOM 以树状结构组织样式信息，类似于 DOM 树。每个节点包含对应元素的计算样式。例如： ~~~ css 体验AI代码助手代码解读复制代码body {font-size: 16px;} h1 {color: blue;} p {margin: 10px;} ~~~ 可能形成如下 CSSOM 结构： ~~~ less 体验AI代码助手代码解读复制代码CSSOM └── body ├── font-size: 16px ├── h1 │ └── color: blue └── p └── margin: 10px ~~~ ### CSSOM 对渲染性能的影响 CSSOM 的构建是渲染阻塞的，意味着在 CSSOM 完全构建之前，页面不会被渲染。为优化性能： * 精简 CSS，移除未使用的样式。 * 使用媒体查询，使非关键 CSS 异步加载。 * 考虑内联关键 CSS。 ## DOM 树和 CSSOM 的关系 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c97bdd172d4948deaa6221ddfe9fb628~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv5b6Q5b6Q:q75.awebp?rk3s=f64ab15b&x-expires=1759193154&x-signature=FfaSo9hvjXmAlnmS4axlP5%2FlChI%3D) ### 并行构建 DOM 树和 CSSOM 是并行构建的，但它们相互依赖以创建最终的渲染输出。 ### 渲染树（Render Tree）的形成渲染树结合了 DOM 树和 CSSOM： 1. 遍历 DOM 树中的可见节点。 2. 对每个可见节点，从 CSSOM 中找到对应的样式规则并应用。 3. 输出包含内容和样式的渲染树。 ### JavaScript 对 DOM 和 CSSOM 的影响 JavaScript 可以动态修改 DOM 和 CSSOM，但这可能导致额外的回流和重绘，影响性能。现代框架（如 React）通过虚拟 DOM 等技术优化了这一过程。