当前位置：首页 > article >正文

如何优化 JavaScript 中的 DOM 操作？

article 2025/1/9 15:14:39

优化 JavaScript 中的 DOM 操作是提升网页性能的一个关键方面，特别是在单页面应用（SPA）或需要频繁更新界面的场景中。由于每次修改 DOM 都可能导致浏览器的重排（Reflow）和重绘（Repaint），频繁的 DOM 操作会影响用户体验，导致页面卡顿或响应迟缓。因此，掌握一些优化策略能够显著提升页面性能。

1. 减少 DOM 操作次数

每次对 DOM 进行修改，浏览器都可能需要重新计算布局（reflow）并重新绘制（repaint）。频繁的 DOM 操作可能会导致这些计算频繁发生，从而影响性能。通过减少 DOM 操作的次数，我们可以避免这些性能瓶颈。

示例：

假设你有一个列表，需要向其中添加 1000 个 li 元素。频繁的 appendChild 操作会导致每次添加时都进行一次重排，影响性能。

// 不优化的做法：每次都对 DOM 进行修改
const list = document.getElementById('list');
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = 'Item ' + i;
  list.appendChild(li); // 每次循环都进行一次 DOM 操作
}

优化方案：

将所有要添加的元素先拼接成字符串，再一次性插入到 DOM 中，减少 DOM 操作的次数。

// 优化做法：减少 DOM 操作次数
const list = document.getElementById('list');
let items = '';
for (let i = 0; i < 1000; i++) {
  items += `<li>Item ${i}</li>`; // 使用字符串拼接
}
list.innerHTML = items; // 一次性将所有元素插入到 DOM 中

这种方式避免了每次添加元素时都进行重排和重绘，显著提高了性能。

2. 使用 `DocumentFragment`

DocumentFragment 是一个轻量级的 DOM 节点，它可以用来临时存放多个子节点。将 DOM 元素添加到 DocumentFragment 后，浏览器不会立即触发重排和重绘，直到将 Fragment 添加到真实的 DOM 中。

示例：

// 使用 DocumentFragment 进行批量 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.getElementById('list').appendChild(fragment); // 一次性将文档片段添加到 DOM 中

在这个例子中，所有的 li 元素都被添加到 DocumentFragment 中，只有在操作完成后，才将整个片段添加到页面中。这样可以避免频繁的重排和重绘。

3. 缓存 DOM 元素引用

如果你需要多次访问同一个 DOM 元素，最好缓存该元素的引用，而不是每次都使用 document.querySelector() 或 document.getElementById() 进行查询。DOM 查询是一个相对较慢的操作，尤其是在复杂的页面结构中。

示例：

// 不优化：每次都查询 DOM 元素
for (let i = 0; i < 1000; i++) {
  const element = document.getElementById('myElement');
  element.textContent = 'Item ' + i; // 每次循环都查询 DOM
}

// 优化：缓存 DOM 元素的引用
const element = document.getElementById('myElement'); // 缓存 DOM 元素
for (let i = 0; i < 1000; i++) {
  element.textContent = 'Item ' + i; // 只查询一次 DOM
}

通过将 DOM 元素的引用存储在变量中，我们避免了多次查询 DOM，从而提高了代码的执行效率。

4. 避免频繁触发重排和重绘

每次对 DOM 进行修改时，浏览器可能会触发重排和重绘。重排是指浏览器重新计算元素的位置、大小和布局，重绘是指更新元素的样式（如颜色、背景、边框等）。这些操作是非常消耗性能的，尤其是在频繁修改 DOM 时。

示例：

// 不优化：每次修改时都触发重排和重绘
const element = document.getElementById('myElement');
element.style.width = '100px'; // 触发重排
element.style.height = '100px'; // 触发重排
element.style.backgroundColor = 'red'; // 触发重绘

// 优化：合并修改，减少重排和重绘
const element = document.getElementById('myElement');
element.style.cssText = 'width: 100px; height: 100px; background-color: red;'; // 一次性修改样式

通过合并多个样式修改为一个 cssText 操作，我们避免了多次触发重排和重绘，提升了性能。

5. 使用 `requestAnimationFrame` 进行动画优化

在需要进行动画时，使用 requestAnimationFrame 可以确保动画在浏览器的刷新率下进行，从而避免了多次重排和重绘，提高动画的流畅度。

示例：

// 不优化：直接修改样式，可能导致不流畅的动画
const element = document.getElementById('myElement');
let startTime = null;
function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const progress = timestamp - startTime;
  element.style.left = Math.min(progress / 10, 500) + 'px'; // 每次修改都触发重排和重绘
  if (progress < 5000) {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

// 优化：使用 requestAnimationFrame 来进行高效动画
const element = document.getElementById('myElement');
let startTime = null;
function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const progress = timestamp - startTime;
  element.style.left = Math.min(progress / 10, 500) + 'px'; // 避免不必要的布局计算
  if (progress < 5000) {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

requestAnimationFrame 会在浏览器下次重绘之前执行回调，确保动画的平滑性，避免了过多的布局计算，提升了动画性能。

6. 总结

通过减少 DOM 操作次数、使用 DocumentFragment 批量修改 DOM、缓存 DOM 元素引用、避免频繁触发重排和重绘等技术手段，我们可以显著提高 JavaScript 中的 DOM 操作性能。实际项目中，根据页面的复杂度和功能需求，合理选择合适的优化策略，能有效提升网页的响应速度和用户体验。

这些优化策略不仅适用于动态更新内容的场景，还能在构建交互复杂的应用时提供性能保障。在进行性能优化时，始终要注意权衡开发复杂度和性能需求。

查看全文

http://www.kler.cn/a/430383.html