js如何优化DOM操作

DOM操作是前端开发中最常见的操作之一，但DOM操作本身性能开销较大，不合理的操作会严重影响页面渲染效率。了解DOM操作的性能瓶颈并掌握对应的优化方法，是提升前端应用性能的关键。

DOM操作的性能瓶颈

DOM操作的主要性能损耗来自重排和重绘。当修改DOM元素的几何属性（如宽高、位置）时，浏览器会重新计算元素的位置和大小，这个过程称为重排，重排后会触发重绘，重新绘制元素的外观。重排的代价远高于重绘，频繁触发重排会导致页面卡顿。

常见触发重排的操作

• 修改元素的宽高、边距、定位等几何属性
• 读取offsetTop、scrollHeight等布局相关属性
• 添加或删除DOM节点
• 改变窗口大小

优化DOM操作的核心方法

1. 批量修改DOM，减少重排次数

如果需要多次修改DOM，不要每次修改都直接操作真实DOM，可以先在内存中完成所有修改，再一次性更新到页面。使用DocumentFragment（文档碎片）可以实现这个效果，文档碎片是一个虚拟的DOM节点，修改它不会触发重排。

// 未优化的写法，每次循环都会触发重排
const container = document.getElementById('container');
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = `第${i}个元素`;
  container.appendChild(div);
}

// 优化后的写法，使用文档碎片批量插入
const container = document.getElementById('container');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = `第${i}个元素`;
  fragment.appendChild(div);
}
// 一次性插入文档碎片，只触发一次重排
container.appendChild(fragment);

2. 缓存DOM节点引用

每次通过选择器获取DOM节点都会遍历DOM树，频繁获取相同节点会带来不必要的性能损耗。可以将常用的DOM节点缓存起来，后续直接使用缓存的引用。

// 未优化的写法，每次循环都获取节点
for (let i = 0; i < 10; i++) {
  const btn = document.getElementById('submitBtn');
  btn.textContent = `提交${i}`;
}

// 优化后的写法，缓存节点引用
const submitBtn = document.getElementById('submitBtn');
for (let i = 0; i < 10; i++) {
  submitBtn.textContent = `提交${i}`;
}

3. 避免频繁读取布局属性

读取offsetTop、clientWidth等布局属性时，浏览器会强制刷新渲染队列，确保获取到的是最新的布局信息，这会触发额外的重排。如果需要多次使用这些属性，应该先缓存起来。

// 未优化的写法，每次读取都触发重排
const box = document.getElementById('box');
for (let i = 0; i < 10; i++) {
  const top = box.offsetTop;
  const left = box.offsetLeft;
  console.log(top, left);
}

// 优化后的写法，缓存布局属性
const box = document.getElementById('box');
const top = box.offsetTop;
const left = box.offsetLeft;
for (let i = 0; i < 10; i++) {
  console.log(top, left);
}

4. 使用事件委托减少事件绑定

如果需要给多个子元素绑定相同的事件，不需要给每个子元素单独绑定，而是把事件绑定到父元素上，通过事件冒泡机制触发回调，这样可以减少事件监听器的数量，提升性能。

// 未优化的写法，给每个li单独绑定事件
const lis = document.querySelectorAll('li');
lis.forEach(li => {
  li.addEventListener('click', function() {
    console.log(this.textContent);
  });
});

// 优化后的写法，使用事件委托
const ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
  // 判断点击的是否是li元素
  if (e.target.tagName.toLowerCase() === 'li') {
    console.log(e.target.textContent);
  }
});

5. 离线操作DOM

如果需要对某个DOM节点做大量修改，可以先将该节点从文档流中移除，修改完成后再插回原位置，这样修改过程中不会触发重排。常见的方式是设置display: none，修改完成后再恢复显示。

const box = document.getElementById('box');
// 离线操作，设置display为none，脱离文档流
box.style.display = 'none';
// 执行大量DOM修改操作
for (let i = 0; i < 50; i++) {
  const p = document.createElement('p');
  p.textContent = `段落${i}`;
  box.appendChild(p);
}
// 修改完成，恢复显示，只触发一次重排
box.style.display = 'block';

优化效果对比

下面通过表格对比不同操作方式的性能差异，测试场景为插入1000个DOM节点：

总结

优化DOM操作的核心是减少重排重绘的触发次数，通过批量操作、缓存引用、事件委托、离线修改等方式，可以有效降低DOM操作的性能损耗。在实际开发中，需要根据具体场景选择合适的优化方案，避免不必要的DOM操作，提升页面的整体性能。

DOM操作优化js性能优化重排重绘文档碎片事件委托修改时间：2026-07-09 12:33:30