JavaScript DOM操作与浏览器执行优化

DOM 操作本身并不缓慢，真正的性能瓶颈在于它触发的浏览器渲染行为——每次修改都可能引发重排（reflow）和重绘（repaint），而这两者属于主线程密集型任务。优化核心并非“减少 JS 编写量”，而是让浏览器更省力：减少触发次数、合并操作、避开同步布局陷阱。以下实战技巧可帮助开发者将性能瓶颈扼杀在萌芽阶段。

缓存查询结果，避免重复遍历

DOM 查询（如 querySelector、getElementById）虽速度较快，但反复调用仍会消耗 CPU 资源，并可能引发意外的性能问题。尤其在循环或高频回调中，未缓存的查询会叠加额外开销。

• 将常用节点赋值给常量或局部变量，例如：const header = document.getElementById('header');
• 避免在 for 循环里反复查询同一个父容器，提前获取后再复用
• 慎用 getElementsByClassName 等返回实时集合（Live Collection）的方法——这些方法会在 DOM 变化时动态更新长度，可能导致循环跳项或死循环

批量修改，一次提交

浏览器对连续的 DOM 写入具有优化机制，但前提是“写完再读”或“集中写入”。零散操作会迫使浏览器多次计算布局，而批量处理可将多次操作压缩为一次重排。

• 使用 document.createDocumentFragment() 在内存中构建完整结构，最后一次性挂载到 DOM 中
• 拼接 HTML 字符串后赋值给 innerHTML（注意 XSS 风险，仅用于可信内容）
• 修改多个样式时，优先切换 class 名，而非逐一设置 style.xxx；或使用 element.style.cssText = 'width:100px;height:200px;' 合并设置

避开强制同步布局

当 JavaScript 读取布局信息（如 offsetHeight、getBoundingClientRect()）后立即写入样式，浏览器必须即时计算当前布局——这打断了渲染流水线，造成“布局抖动”（Layout Thrashing）。

• 按照“全部写入 → 全部读取”的顺序组织代码，避免交替执行
• 在动画场景下，使用 requestAnimationFrame 包裹读写操作，确保在下一帧开始前完成
• 对频繁读写的元素，可先通过 el.style.display = 'none' 将其脱离渲染树，修改完毕后再恢复显示

事件委托代替遍历绑定

为大量子元素（如列表项、表格行）逐一添加事件监听器，不仅内存占用高，还会增加初始化时间。利用事件冒泡机制，在父级统一处理更加轻量，也更易于维护。

• 监听父容器的点击事件，通过 event.target 判断实际触发源
• 适用于动态增删子节点的场景——新节点无需额外绑定事件
• 注意过滤非目标元素（如文本节点、图标子元素），可使用 event.target.closest('.item') 进行精确匹配