🏎️ JS DOM 操作性能优化详解

DOM 操作是前端开发中最容易造成性能瓶颈的地方，尤其是频繁操作或大规模更新节点时。

1️⃣ 为什么频繁操作 DOM 会慢？

原理

重排（Reflow / Layout）
- 当 DOM 的结构或尺寸变化时，浏览器必须重新计算元素位置和大小。
- 例如：修改元素的 width、class、添加/删除节点。
重绘（Repaint）
- 当样式变化但布局不变时，浏览器重新绘制像素。
- 例如：修改 color、background。
合成与渲染
- 重排 + 重绘会触发渲染流水线，频繁触发会导致页面卡顿，尤其是列表或循环操作。

举例

// 慢：循环中频繁修改 DOM
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  document.querySelector('ul').appendChild(li); // 每次 append 都触发一次重排
}

2️⃣ 优化方式一：DocumentFragment

✅ 原理

DocumentFragment 是一个轻量级 DOM 容器，不在主 DOM 树中，因此修改 fragment 不会触发重排/重绘。
操作完成后再一次性添加到页面。

示例

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); // 一次性加入，触发一次重排

✅ 效果：减少 1000 次重排为 1 次。

3️⃣ 优化方式二：一次性 innerHTML 替换

✅ 原理

利用字符串拼接生成 HTML，然后一次性替换容器的内容。
避免多次 DOM 操作。

示例

let html = '';
for (let i = 0; i < 1000; i++) {
  html += `<li>Item ${i}</li>`;
}
document.querySelector('ul').innerHTML = html; // 一次性更新

⚠️ 注意事项

会移除原有事件绑定，需要重新绑定。
容器内部所有节点会被替换，慎用在动态交互组件。
对小型列表差异不大，但大型数据列表性能提升明显。

4️⃣ 优化方式三：批量修改 + 样式缓存

技巧

批量修改样式前先缓存 DOM 元素引用。
修改多条样式时，最好修改 class 或 cssText 一次性应用，而不是单个属性逐条修改。

const el = document.querySelector('#box');
el.style.cssText = 'width: 200px; height: 100px; background-color: red;';

尽量避免循环中频繁读取或写入 layout 属性（如 offsetHeight、scrollTop），因为读取也会强制浏览器同步计算重排。

5️⃣ 性能优化最佳实践 Checklist

优化策略	操作建议
DocumentFragment	大量新增或移动 DOM 节点时使用
innerHTML	一次性生成 HTML 字符串替换容器内容
批量样式	修改多个样式时，先修改 class 或 cssText
避免循环读取 layout 属性	offsetWidth/offsetHeight/scrollTop 等会强制重排
避免频繁重排	尽量合并多次 DOM 更新
使用虚拟 DOM 或前端框架	React/Vue/Preact 等可自动批量更新，减少手动优化负担

💡 总结：

原则：减少 DOM 修改次数 → 减少重排/重绘 → 页面更流畅
小型 DOM：影响不大，可直接操作
大型列表 / 动态内容：使用 DocumentFragment 或 innerHTML 批量操作
交互复杂组件：结合框架或虚拟 DOM 技术更高效

如果你愿意，我可以帮你把这部分内容整理成 HTML & JS 开发性能优化完整笔记 + checklist，直接加入你的 HTML 笔记体系中，便于复习与实战参考。

你希望我整理吗？