DOM操作变慢主因是触发重排重绘；频繁读写布局属性、用innerHTML批量修改、事件委托层级过深、高频事件未节流、误用实时集合等均加剧性能问题。
DOM 操作为什么会让 JS 变慢
直接修改 document.body.innerHTML 或频繁读写 offsetHeight、getBoundingClientRect()，会强制触发浏览器重排（reflow）和重绘（repaint）。一次 innerHTML = '...' 可能引发整棵子树的样式计算+布局+绘制，尤其在中低端设备上延迟明显。
常见错误现象：for (let i = 0; i —— 每次 <code>appendChild 都可能触发重排；for (let i = 0; i —— 强制同步布局，形成“布局抖动”（layout thrashing）。
- 避免在循环中读写布局相关属性（
offsetTop、scrollLeft、getComputedStyle()等） - 批量 DOM 变更优先用
DocumentFragment或离线节点暂存 - 用
requestAnimationFrame()批量读取布局，再批量写入（读-写分离）
innerHTML vs createElement 性能怎么选
不是“谁绝对快”，而是看场景：innerHTML 在插入大量纯 HTML 字符串时更快（V8 和 Blink 有优化），但会销毁原有事件监听器、丢失表单状态；createElement + appendChild 更可控，适合动态绑定事件或需保留节点引用的场景。
实测差异：插入 1000 个 <div class="item"></div>，innerHTML 通常快 2–5 倍；但若其中包含 <input value="user-typed">，用 innerHTML 会清空用户输入。
立即学习“前端免费学习笔记（深入）”；
- 纯展示型列表（如搜索结果、日志流）→ 用
innerHTML+ 模板字符串，但确保不覆盖交互态元素 - 含表单、自定义组件、需事件委托的区域 → 用
document.createElement+DocumentFragment - 现代替代方案：考虑
template标签 +content.cloneNode(true)，兼顾安全与性能
事件绑定太多导致卡顿？别盲目用事件委托
事件委托（el.addEventListener('click', handler) 放在父级）确实减少监听器数量，但前提是事件能冒泡且目标明确。如果父容器层级太深（比如挂到 document）、或 handler 里频繁调用 event.target.closest('.btn')，反而增加 CPU 开销。
容易踩的坑：document.addEventListener('click', e => { if (e.target.matches('.item')) {...} }) —— 每次点击都遍历整个路径；更糟的是在 handler 里又调用 e.target.parentElement.querySelector('.meta')。
- 优先把委托层设在**最近公共父级**，而非
document或body - 用
e.target.classList.contains('action-btn')替代matches()（更快） - 对高频事件（
mousemove、scroll）必须加throttle或debounce，否则 JS 主线程被占满
getElementsByClassName 返回的是实时集合，小心无限循环
getElementsByClassName、getElementsByTagName 返回的是 HTMLCollection，它是**实时的（live）**——DOM 变动会立刻反映在集合长度和内容上。这在循环中删除节点时极易出错：
const items = document.getElementsByClassName('todo');
for (let i = 0; i < items.length; i++) {
items[i].remove(); // 删除后 items.length 减 1，但 i 还在递增 → 跳过下一个
}正确做法是倒序遍历，或转成静态数组：
- 倒序：
for (let i = items.length - 1; i >= 0; i--) { items[i].remove(); } - 转数组：
[...items].forEach(el => el.remove())或Array.from(items).forEach(...) - 更推荐用
querySelectorAll('.todo')—— 返回静态NodeList，语义清晰且行为可预期
这个细节在动态渲染列表（如 todo 应用）里非常关键，漏掉就导致残留 DOM 或操作错位。
