DOM操作性能优化的核心是减少重排重绘：①用DocumentFragment批量插入；②缓存DOM引用和布局属性；③读写分离避免强制同步布局；④事件委托降低监听器数量；⑤用CSS类切换替代内联样式。JavaScript 中 DOM 操作引发的性能问题，核心在于**每次变更都可能触发浏览器重排（reflow）和重绘（repaint）**，而这两者是渲染流程中最耗资源的环节。浏览器必须重新计算元素位置尺寸、更新渲染树、再绘制像素——尤其在循环中反复读写、频繁插入或样式抖动时，卡顿会立刻显现。
批量操作避免多次重排
逐个向页面添加 100 个 <li>，等于触发 100 次重排；而用 documentfragment 先在内存中组装好，再一次性挂载，只触发 1 次。
- 创建片段：
const fragment = document.createDocumentFragment(); - 所有节点先追加到
fragment，不触发现实 DOM 更新 - 最后用
parent.appendChild(fragment)完成单次插入
缓存 DOM 引用减少查询开销
每次调用 document.getElementById 或 querySelector 都需遍历 DOM 树，重复查询同一元素纯属浪费。
- 把常用节点赋值给变量，如
const btn = document.querySelector('#submit'); - 避免在 for 循环内写
document.querySelector('.item') - 连读属性也建议缓存，比如
const width = el.clientWidth;而非反复取
读写分离防止强制同步布局
在修改样式后立刻读取 offsetHeight 或 getBoundingClientRect()，浏览器被迫同步刷新布局队列，造成“布局抖动”。
- 先集中完成所有写操作（改 class、style、innerHTML 等）
- 再统一读取布局信息，避免交替执行
- 动画场景可用
requestAnimationFrame协调时机
事件委托降低监听器数量
为列表中每个 <button> 单独绑定 click，100 个按钮就 100 个监听器——内存占用高、初始化慢、移除麻烦。
- 只在父容器上监听一次，如
list.addEventListener('click', handler) - 在回调中用
event.target判断实际点击目标 - 适用于动态增删子项的场景，无需反复绑定/解绑
用 class 切换替代内联样式操作
连续设置 el.style.color、el.style.fontSize、el.style.margin，每条都会触发样式计算与重排。
立即学习“Java免费学习笔记（深入）”；
- 提前定义 CSS 类，如
.active { color: red; font-size: 16px; margin: 8px; } - 用
el.classList.toggle('active')一次性切换状态 - 既语义清晰，又由浏览器内部优化样式合并
