DOM 操作本身并不慢，真正的性能瓶颈在于它触发的浏览器渲染流程——每次修改都可能导致重排（reflow）和重绘（repaint），这两个过程占用了主线程的大量资源。优化的核心并非简单地“少写 JavaScript”，而是让浏览器更高效地工作：减少触发次数、合并操作、避免同步布局陷阱。以下实战技巧，帮助你从根源上消除性能瓶颈。
缓存 DOM 查询结果，避免重复遍历
DOM 查询（如 querySelector、getElementById）虽然速度较快，但反复调用仍会消耗 CPU 并可能引发意外性能问题，尤其在循环或高频回调中，未缓存的查询会叠加额外开销。
- 将频繁使用的 DOM 节点保存为常量或局部变量，例如：
const header = document.getElementById('header'); - 避免在 for 循环中重复查询同一父容器，应提前获取并复用。
- 谨慎使用
getElementsByClassName等返回实时集合（Live Collection）的方法——这些集合在 DOM 变化时会动态更新长度，容易导致循环跳过元素或陷入死循环。
批量修改 DOM，一次性提交减少重排
浏览器对连续的 DOM 写入有优化机制，但前提是“写完再读”或“集中写入”。零散操作会迫使浏览器多次计算布局，而批量处理可压缩为一次重排。
- 使用
document.createDocumentFragment()在内存中构建完整 DOM 结构，最后一次性挂载到文档。 - 拼接 HTML 字符串后通过
innerHTML一次性赋值（注意防范 XSS，仅用于可信内容）。 - 修改多个样式时，优先切换 class 名称，避免逐个设置
style.xxx；或者使用element.style.cssText = 'width:100px;height:200px;'合并样式设置。
避免强制同步布局（Layout Thrashing）
当 JavaScript 读取布局信息（如 offsetHeight、getBoundingClientRect()）后立刻写入样式，浏览器必须立即计算当前布局——这打断了渲染流水线，造成“布局抖动”。
- 按照“先全部写入，再全部读取”的顺序组织代码，避免交替执行。
- 在动画场景中，使用
requestAnimationFrame包裹读写操作，确保在下一帧渲染前完成。 - 对于频繁读写的元素，可以先设置
el.style.display = 'none'使其脱离渲染树，修改完成后再恢复显示。
使用事件委托代替遍历绑定
为大量子元素（如列表项、表格行）逐一添加事件监听器，不仅内存占用高，还会增加初始化时间。利用事件冒泡机制，在父级统一处理更轻量、更易维护。
- 监听父容器的点击事件，通过
event.target判断实际触发元素。 - 特别适用于动态增删子节点的场景——新添加的节点无需额外绑定事件。
- 注意过滤非目标元素（如文本节点、图标子元素），建议使用
event.target.closest('.item')进行精确匹配。
