频繁DOM操作引发重排重绘，降低性能。应缓存DOM引用、批量更新使用DocumentFragment、避免强制同步布局，并通过事件委托减少监听器数量，从而减少操作次数与浏览器回流。
频繁的DOM操作是影响JavaScript性能的主要原因之一。浏览器在每次DOM变动后都可能触发重排（reflow）和重绘（repaint），这些过程非常消耗资源。要提升性能，关键是减少直接操作次数、批量处理变更，并避免强制同步布局。
减少DOM访问频率
每次读取或修改DOM节点都会带来开销，尤其是跨层级查询时。应尽量在JavaScript中缓存对DOM的引用，避免重复查找。
建议：- 将常用的元素赋值给变量，如 const list = document.getElementById('list');
- 避免在循环中查询DOM，提前获取所需节点
- 使用局部变量暂存属性值，比如 clientWidth 或 innerHTML
使用文档片段（DocumentFragment）批量插入
如果需要添加多个节点，逐个插入会多次触发渲染。DocumentFragment 可以在内存中构建完整的DOM结构，再一次性挂载到页面上。
示例：const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const item = document.createElement('li');
item.textContent = `Item ${i}`;
fragment.appendChild(item);
}
list.appendChild(fragment); // 只触发一次重排
避免强制同步布局
当在JavaScript中读取布局信息（如 offsetTop、offsetHeight）后立即修改样式，浏览器会强制刷新渲染树，造成“布局抖动”。
立即学习“Java免费学习笔记（深入）”；
正确做法：- 先完成所有写操作，再统一读取布局信息
- 使用 requestAnimationFrame 协调动画中的读写顺序
- 避免在循环中交替读写样式
利用事件委托减少监听器数量
为大量子元素单独绑定事件会占用过多内存。通过事件冒泡机制，在父级统一对事件进行处理，可显著降低开销。
适用场景：- 动态生成的列表项点击处理
- 表格内按钮的操作响应
- 标签页、菜单等组件交互
只需为外层容器绑定一个事件，用 event.target 判断实际触发源即可。
基本上就这些。核心思路是：少碰DOM，批量操作，避免打断浏览器的优化节奏。不复杂但容易忽略。
