优化DOM操作需减少重排重绘：批量修改用DocumentFragment或隐藏元素；读写布局信息集中处理；用classList替代className；事件委托代替多绑定；缓存DOM查询结果。
直接操作 DOM 是前端开发的基础能力，但频繁或不当的操作会显著拖慢页面性能。关键在于减少重排（reflow）和重绘（repaint），并降低 JavaScript 与渲染引擎之间的交互开销。
批量修改 DOM，避免反复触发重排
每次读取或写入某些 DOM 属性（如 offsetTop、clientWidth、getComputedStyle()）都可能强制浏览器同步计算样式和布局，导致重排。如果在循环中交替读写，性能损耗会急剧放大。
- 把多次 DOM 写入合并为一次：先用 documentFragment 收集节点，再一次性插入；或先修改元素的 display: none，操作完再显示
- 读取布局信息时，集中放在写入前或后，避免“读-写-读-写”模式
- 例如：要给 100 个列表项添加 class 并获取高度，先全部加 class，再统一读取高度，而不是每加一个就读一次
使用 classList 替代 className 操作类名
className 是字符串操作，容易误删其他 class；而 classList 提供原子方法（add、remove、toggle、contains），语义清晰且性能更优，浏览器对其做了专门优化。
- 避免 elem.className += ' active' —— 可能重复添加或破坏原有结构
- 推荐 elem.classList.add('active')，支持多参数，如 elem.classList.add('a', 'b', 'c')
- 切换状态优先用 toggle()，比手动判断 + add/remove 更简洁安全
事件委托代替大量绑定
为每个子元素单独绑定事件监听器（如为表格每一行绑 click）会造成内存占用高、初始化慢，还可能因动态增删节点而漏绑定或重复绑定。
立即学习“Java免费学习笔记（深入）”；
- 把监听器绑定在父容器上，利用事件冒泡机制捕获目标元素
- 用 e.target 判断是否命中目标（配合 matches() 方法，如 e.target.matches('.btn-delete')）
- 特别适合列表、菜单、动态加载内容等场景，一个监听器覆盖全部子孙节点
缓存 DOM 查询结果，避免重复 getElementById / querySelector
每次调用查询方法都要遍历 DOM 树，尤其是深层嵌套或复杂选择器时开销明显。对频繁使用的元素，查一次、存变量、反复用。
- 不要在循环或高频函数（如 scroll、resize 回调）里反复写 document.querySelector('.header')
- 提升到作用域外或模块级变量中缓存：const header = document.querySelector('.header');
- 对动态变化的结构，可结合 MutationObserver 监听增删，按需更新缓存，而非每次都重新查
