回流是页面布局改变时重新计算元素几何属性的过程，重绘是样式改变后重新绘制，回流必触发重绘。频繁的DOM操作如增删节点、读取布局属性等会引发回流，降低性能。可通过DocumentFragment批量操作、缓存属性读取、使用CSS类替代直接样式修改、避免循环中频繁访问布局信息等方式优化，减少回流重绘，提升页面响应速度与用户体验。
在JavaScript中进行DOM操作时，频繁的重绘（Repaint）和回流（Reflow）是影响页面性能的主要因素。理解它们的触发机制并采取优化策略，能显著提升页面响应速度和用户体验。
什么是重绘与回流？
回流（Reflow）：当页面布局发生改变时，浏览器需要重新计算元素的几何属性（如位置、大小），并重新构建渲染树。这个过程称为回流，开销较大。
重绘（Repaint）：当元素的视觉样式（如颜色、背景）改变但不影响布局时，浏览器只需重新绘制该部分，不涉及几何计算，开销较小。
注意：回流一定会触发重绘，但重绘不一定触发回流。
哪些操作会触发回流？
以下常见的DOM操作都会导致回流：
- 添加、删除、修改DOM节点
- 调整元素尺寸、位置（width, height, margin, padding等）
- 读取某些布局属性，如offsetTop、offsetWidth、clientHeight、scrollHeight等
- 调用getComputedStyle或getBoundingClientRect
- 窗口大小调整或字体变化
这些操作一旦频繁执行，会导致连续回流，严重降低性能。
优化方案：减少回流与重绘
通过合理的编码方式，可以有效减少不必要的回流与重绘。
1. 使用文档片段（DocumentFragment）批量操作将多个DOM操作合并为一次插入，避免逐个添加引发多次回流。
const fragment = document.createDocumentFragment();
for (let i = 0; i < items.length; i++) {
const li = document.createElement('li');
li.textContent = items[i];
fragment.appendChild(li);
}
list.appendChild(fragment); // 仅触发一次回流
2. 批量修改样式：使用类名或CSSOM
避免频繁修改内联样式。推荐通过切换class来应用样式变更。
// 推荐做法
element.classList.add('highlight');
// 避免这样写
element.style.color = 'red';
element.style.marginTop = '10px';
element.style.padding = '5px'; // 多次触发
如果必须动态设置多个样式，可操作cssText或使用insertRule。
3. 避免在循环中读取布局信息读取offset、scroll等属性会强制浏览器刷新队列，触发同步回流。
// 错误示例：每次循环都触发回流
for (let i = 0; i < 1000; i++) {
el.style.width = el.offsetWidth + 1 + 'px';
}
// 正确做法：先读再写
const width = el.offsetWidth;
for (let i = 0; i < 1000; i++) {
el.style.width = width + i + 'px';
}
4. 利用离线DOM操作
将元素从文档中移除或隐藏后再操作，完成后再重新插入。
el.style.display = 'none'; // 脱离渲染流
// 进行一系列操作
el.className = 'new-class';
el.innerHTML = '更新内容';
el.style.display = 'block'; // 一次性重绘
5. 合理使用requestAnimationFrame
在动画或连续状态更新中，使用requestAnimationFrame确保操作在浏览器下一次重绘前执行，避免布局抖动。
function animate() {
element.style.transform = 'translateX(' + x++ + 'px)';
if (x < 100) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
CSS层面的优化建议
CSS也能影响重绘与回流效率：
- 优先使用transform和opacity实现动画，它们不会触发回流
- 避免使用table布局，其回流成本极高
- 对频繁变化的元素使用position: fixed或absolute，使其脱离文档流
- 启用will-change属性提示浏览器优化特定属性
基本上就这些。掌握这些技巧后，在操作DOM时会有更清晰的性能意识。关键是尽量减少“读-写”交替，把变更集中处理，让浏览器能高效批量化执行渲染任务。
