频繁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 字符串”当成肌肉记忆，比任何框架封装都管用。
