频繁DOM操作会拖慢页面，因读写混合触发强制重排重绘；应读写分离、批量操作（如DocumentFragment）、用classList替代className字符串拼接。

为什么频繁 DOM 操作会拖慢页面

浏览器每次执行 document.getElementById、element.appendChild 或读取 offsetHeight 等布局属性，都可能触发重排（reflow）或重绘（repaint）。尤其是连续读写混合操作，比如循环中反复 el.innerHTML += ...，会让浏览器在每次迭代都重新解析、构建、布局，性能断崖式下降。

• 重排代价远高于重绘，涉及几何尺寸变化时（如宽高、位置、字体）必然触发
• 强制同步布局：读取 offsetTop、getBoundingClientRect() 等会立即 flush 队列，打断批量优化
• 每次 innerHTML 赋值都会销毁并重建子树，事件监听器全部丢失

用 DocumentFragment 批量插入节点

当需要一次插入多个新元素（比如从数组生成列表项），直接循环调用 parent.appendChild(child) 会逐个触发 DOM 更新。改用 DocumentFragment 可把所有节点先“离线”组装好，再一次性挂载。

const fragment = document.createDocumentFragment();
const items = ['Apple', 'Banana', 'Cherry'];
items.forEach(text => {
const li = document.createElement('li');
li.textContent = text;
fragment.appendChild(li); // 不触发真实 DOM 更新
});
ulElement.appendChild(fragment); // 仅一次真实操作

• DocumentFragment 是轻量容器，不属主 DOM 树，无渲染开销
• 替代方案如字符串拼接 innerHTML 虽快，但有 XSS 风险且无法复用已有元素引用
• 若需保留事件委托，优先选 DocumentFragment + 事件代理，而非内联绑定

避免在循环中读写交替访问 DOM

下面这段代码看似自然，实则灾难性：

for (let i = 0; i < 100; i++) {
  const el = document.getElementById(`item-${i}`);
  el.style.color = 'red';
  console.log(el.offsetHeight); // 强制重排！每次循环都触发
}

正确做法是「读阶段」和「写阶段」分离：

• 先批量读取所有需要的值（如 offsetHeight、getComputedStyle），存入数组或变量
• 再批量写入（如设置 style、className）
• 或者用 requestAnimationFrame 把写操作统一到下一帧：

requestAnimationFrame(() => {
  elements.forEach(el => {
    el.style.color = 'red';
    el.style.transform = 'translateX(10px)';
  });
});

• 浏览器会在一帧内自动合并样式变更，减少重排次数
• 注意：requestAnimationFrame 不解决读取布局导致的强制同步，仍需先读后写

用 classList 替代 className 字符串拼接

直接操作 element.className += ' active' 容易重复添加、难以移除、引发竞态。而 classList 是原生 API，语义清晰且原子性强：

• el.classList.add('active') 自动去重，多次调用无副作用
• el.classList.toggle('hidden') 比手动判断 includes + add/remove 更可靠
• el.classList.replace('old', 'new') 原子替换，避免中间态样式错乱

// ❌ 危险：可能产生 'btn btn btn-active'
button.className += ' btn-active';
// ✅ 安全：幂等、可预测
button.classList.add('btn-active');
button.classList.remove('btn-inactive');

真正影响性能的往往不是单次 DOM 操作，而是未意识到的隐式同步布局与高频小操作的叠加。把“读/写分离”“批量提交”“避免内联 HTML 字符串”当成肌肉记忆，比任何框架封装都管用。