深入理解 DOM 和 CSSOM：网页渲染的核心

咖啡虫

已于 2025-02-23 13:05:56 修改

阅读量948

点赞数 27

分类专栏：前端中的一些概念及理解文章标签： javascript

于 2025-02-23 13:04:14 首次发布

本文链接：https://blog.youkuaiyun.com/u012446963/article/details/145808318

版权

前端中的一些概念及理解专栏收录该内容

18 篇文章

订阅专栏

深入理解 DOM 和 CSSOM：网页渲染的核心

在现代网页开发中，DOM（文档对象模型）和 CSSOM（CSS 对象模型）是浏览器渲染页面时的关键组成部分。理解这两个概念及其操作方法，有助于开发者优化网页性能、提升交互体验。本文将详细讲解 DOM 和 CSSOM 的基本概念、功能及其渲染方式，并通过具体的优化技巧和实例帮助你深入理解。

在这里插入图片描述

什么是 DOM（文档对象模型）？

DOM 是浏览器用于表示网页内容和结构的对象模型。它将网页的 HTML 或 XML 文档表示为一个树形结构，每个部分（如元素、文本和属性）都成为一个节点。通过 JavaScript，开发者可以操作这些节点，从而动态地修改页面的内容和结构。

DOM 的基本概念

树状结构：DOM 将 HTML 或 XML 文档表示为一个树形结构，树的每个节点代表文档中的一个部分。例如，元素节点、文本节点和属性节点。
节点类型：常见的 DOM 节点包括：
- 元素节点：代表 HTML 元素，如 <div>, <p>, <a> 等。
- 文本节点：代表 HTML 元素中的文本内容。
- 属性节点：代表 HTML 元素的属性，如 id, class, href 等。

DOM 的操作功能

通过 JavaScript，开发者可以对 DOM 进行多种操作，实现动态内容更新、结构调整和用户交互处理。

获取节点：通过以下方法可以访问页面中的元素节点：
- getElementById('id')：通过 ID 获取元素。
- getElementsByClassName('class')：通过类名获取元素。
- querySelector('.class')：通过 CSS 选择器获取单个元素。
- querySelectorAll('.class')：通过 CSS 选择器获取所有匹配的元素。
修改内容和样式：
- innerHTML：修改元素的 HTML 内容。
- textContent：修改元素的文本内容。
- setAttribute('attribute', 'value')：修改元素的属性，如 setAttribute('href', 'https://newlink.com')。
创建和删除节点：
- createElement('tagName')：创建一个新的元素节点。
- appendChild(newNode)：将新节点添加到父元素。
- removeChild(childNode)：删除指定的子节点。
事件处理：
- addEventListener('event', function)：为元素添加事件监听器（如点击、悬停、键盘输入等）。

DOM 操作示例：

// 获取 ID 为 'demo' 的元素
var element = document.getElementById('demo');

// 修改该元素的文本内容
element.textContent = 'Hello, World!';

// 获取该元素的 class 属性
console.log(element.getAttribute('class'));

// 创建一个新的段落元素并插入到页面中
var newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph.';
document.body.appendChild(newElement);

什么是 CSSOM（CSS 对象模型）？

CSSOM 是浏览器用来表示 CSS 样式的对象模型。与 DOM 类似，CSSOM 将 CSS 样式表表示为一棵树，其中的每个节点代表一个样式规则、选择器或者属性。浏览器通过解析 CSS 文件，构建出一个 CSSOM 树，并与 DOM 结合来决定如何渲染网页。

CSSOM 的基本概念

树状结构：CSSOM 将 CSS 样式表表示为树形结构，每个节点表示一个 CSS 规则。
样式规则：每个规则节点包括选择器和声明（如颜色、字体、布局等）。
与 DOM 的结合：当浏览器渲染页面时，它会将 DOM 树与 CSSOM 树结合，生成渲染树（Render Tree），并根据渲染树来布局和绘制页面。

CSSOM 的操作功能

通过 JavaScript，你可以操作和修改页面的 CSS 样式，进而影响元素的外观。

修改元素样式：通过 element.style 修改元素的行内样式。
动态修改类：通过 classList 添加、删除或切换 CSS 类。

CSSOM 操作示例：

// 通过 JavaScript 动态修改元素的样式
document.getElementById('demo').style.color = 'red';

// 动态添加或删除类
document.getElementById('demo').classList.add('new-class');
document.getElementById('demo').classList.remove('old-class');

DOM 和 CSSOM 的渲染方式

当页面加载时，浏览器会依次进行以下几个步骤：

解析 HTML 文件：浏览器将 HTML 文档解析为 DOM 树。
解析 CSS 文件：浏览器将 CSS 文件解析为 CSSOM 树。
构建渲染树：浏览器将 DOM 树和 CSSOM 树结合，生成渲染树。渲染树包含了每个可见元素的样式信息。
布局：浏览器根据渲染树进行布局计算，确定每个元素的位置和大小。
绘制：浏览器将元素渲染到屏幕上。

DOM 和 CSSOM 的优化技巧

当涉及到页面渲染时，频繁的 DOM 和 CSSOM 操作会导致性能问题，如页面渲染缓慢、卡顿等。以下是一些具体的优化技巧，帮助你提高网页的渲染效率：

1. 减少不必要的 DOM 操作

每次修改 DOM 时，浏览器都会重新计算布局并触发渲染，这会导致页面性能下降。通过减少不必要的 DOM 操作，尤其是大量 DOM 元素的更新，可以显著提高页面性能。

优化示例：

// 使用文档片段来批量更新 DOM，避免每次操作都触发重排
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);  // 将所有元素添加到文档片段中
}
document.querySelector('ul').appendChild(fragment);  // 一次性插入所有项

2. 避免强制同步布局

当你在 JavaScript 中获取页面元素的布局属性时（如 offsetHeight, clientWidth, scrollTop 等），浏览器会强制重新计算页面布局。这会导致性能下降，特别是在频繁访问这些属性时。

优化示例：

// 合并读取和修改操作，避免强制同步布局
const width = element.offsetWidth;  // 先读取布局信息
element.style.width = '100px';  // 修改样式
console.log(width);  // 输出已读取的布局信息

3. 优化 CSS 选择器

复杂的 CSS 选择器（特别是深层嵌套的选择器）会增加浏览器解析 CSS 样式表的时间，导致 CSSOM 构建的效率下降。使用简单、快速的选择器可以加速页面的渲染。

优化示例：

/* 使用简洁的选择器提高性能 */
a:hover {
  color: red;
}

4. 减少页面中的大量内联样式

每次修改元素的内联样式时，浏览器都会强制重新计算布局，尤其是在大量元素上频繁修改样式时。因此，减少内联样式的使用，并将样式放到外部 CSS 文件中，可以显著提高渲染效率。

优化示例：

/* 外部 CSS 样式 */
.positioned {
  position: absolute;
}

// 为每个元素添加一个类，而不是直接修改内联样式
for (let i = 0; i < 1000; i++) {
  const element = document.createElement('div');
  element.classList.add('positioned');
  element.style.left = `${i * 10}px`;  // 只修改必要的样式
  document.body.appendChild(element);
}

5. 使用 `requestAnimationFrame` 优化动画

频繁操作 DOM 或 CSSOM 会导致多次重排和重绘，尤其是在做动画时。使用 requestAnimationFrame 可以将动画操作集中在浏览器的渲染周期内，减少不必要的布局计算。

优化示例：

// 使用 requestAnimationFrame 来优化动画性能
function animate() {
  element.style.left = `${parseInt(element.style.left) + 1}px`;
  requestAnimationFrame(animate);  // 将下一个动画帧安排在浏览器的渲染周期内
}
requestAnimationFrame(animate);  // 启动动画