减少重排与重绘，避免循环中读写样式属性，通过切换CSS类批量修改样式，并将元素脱离文档流操作；2. 使用DocumentFragment批量插入节点，仅触发一次渲染；3. 利用事件委托在父级处理子元素事件，降低内存消耗；4. 缓存DOM查询结果，避免重复查找，防止内存泄漏；合理组织DOM操作可显著提升页面性能。
在现代前端开发中，DOM操作是JavaScript与用户界面交互的核心。但由于DOM结构的复杂性和浏览器渲染机制的限制，频繁或不当的操作会显著影响页面性能。掌握高效的DOM操作方式，能有效提升应用响应速度和用户体验。
减少重排（Reflow）与重绘（Repaint）
每次修改元素的几何属性（如宽高、位置）都会触发重排，进而可能引发重绘。这两种操作代价高昂，尤其在大量节点变动时。
- 避免在循环中读写样式属性，例如offsetTop、clientWidth等，这类操作会强制浏览器同步计算布局
- 批量修改样式时，优先通过切换CSS类来实现，而不是逐条设置style属性
- 将元素脱离文档流进行操作，比如设置position: absolute或暂时移出DOM树，完成后再插入
使用文档片段（DocumentFragment）批量插入
当需要添加多个节点时，直接逐个插入会多次触发渲染更新。使用DocumentFragment可在内存中构建完整结构，再一次性挂载到DOM树。
- 创建const fragment = document.createDocumentFragment()
- 在fragment上添加所有子节点
- 最后将fragment附加到目标容器，仅触发一次渲染
利用事件委托减少监听器数量
为大量子元素单独绑定事件会消耗内存并降低性能。通过事件冒泡机制，在父级元素上统一处理事件，更加高效。
立即学习“Java免费学习笔记（深入）”；
- 将事件监听器绑定到共同祖先节点
- 使用event.target判断实际触发源
- 适用于动态增删的列表项、表格行等场景
缓存DOM查询结果
频繁调用document.getElementById、querySelector等方法开销较大，尤其是深层查找。
- 将常用节点引用存储在变量中，避免重复查询
- 在组件或模块生命周期初始化时集中获取
- 注意节点生命周期，避免持有已删除节点的引用导致内存泄漏
基本上就这些关键点。合理组织DOM变更、减少浏览器渲染压力，是保持页面流畅的基础。不复杂但容易忽略。
