回流与重绘

在前端性能优化中，**回流（Reflow）和重绘（Repaint）**是两个核心概念。理解它们的触发机制和优化方法，能显著提升页面渲染效率。以下是详细解析：

一、基本概念

1. 回流（Reflow）

定义：当DOM的变化影响了元素的布局信息（元素的宽高、位置、边距等几何信息），浏览器需要重新计算元素在视口内的位置和大小，将其安放到界面中的过程。
触发场景：
- 修改元素尺寸（width、height、padding等）。
- 修改元素位置（margin、top、left等）。
- 添加/删除可见DOM元素。
- 修改字体大小或类型。
- 浏览器窗口尺寸变化（resize事件）。
- 获取某些布局信息（如offsetWidth、scrollTop等）。

2. 重绘（Repaint）

定义：当DOM的变化只影响了元素的外观（如颜色、透明度、边框样式等），不影响布局信息时，浏览器将新样式应用到元素上的过程。
触发场景：
- 修改背景色（background-color）。
- 修改文字颜色（color）。
- 修改边框样式（border-style）。
- 修改透明度（opacity）。

3. 关系

回流必触发重绘，因为布局变化后元素外观需重新绘制。
重绘不一定触发回流，如仅修改颜色不会影响布局。

二、触发回流的常见操作

以下操作会强制浏览器立即执行回流：

读取布局信息的属性：

element.offsetWidth/offsetHeight
element.clientWidth/clientHeight
element.scrollWidth/scrollHeight
element.getBoundingClientRect()
window.scrollX/scrollY
window.innerWidth/innerHeight

修改元素几何信息：

element.style.width = '200px';
element.style.margin = '10px';

DOM操作：

document.body.appendChild(newElement);
element.remove();

修改字体：
```
element.style.fontSize = '20px';
```

三、性能影响

回流的代价更高
- 回流需要重新计算整个渲染树的布局信息，涉及大量几何计算，性能开销大。
- 重绘只需修改元素的外观，开销较小。
频繁回流的危害
- 页面卡顿、滚动不流畅。
- 高帧率动画掉帧（如60fps降至30fps）。
- 移动设备上耗电加剧。

四、优化策略

1. 批量修改样式

反例：

element.style.width = '100px'; // 触发回流
element.style.height = '200px'; // 再次触发回流
element.style.margin = '10px'; // 又一次触发回流

优化：

// 方案1：合并样式修改
element.style.cssText = 'width: 100px; height: 200px; margin: 10px';

// 方案2：通过class批量修改
element.classList.add('new-style');

2. 缓存布局信息

反例（多次回流）

// 读取布局信息（触发第1次回流，假设队列非空）
const width = element.offsetWidth;

// 修改样式（放入队列）
element.style.width = width * 2 + 'px';

// 再次读取布局信息（触发第2次回流）
const height = element.offsetHeight;

// 再次修改样式（放入队列）
element.style.height = height * 2 + 'px';

优化（仅一次回流）

// 批量读取布局信息（假设队列空，不触发回流）
const width = element.offsetWidth;
const height = element.offsetHeight;

// 批量修改样式（全部放入队列）
element.style.width = width * 2 + 'px';
element.style.height = height * 2 + 'px';

// 最终仅在渲染前触发1次回流

3. 使用`requestAnimationFrame`

适用于动画场景，将多次修改集中到下一帧执行：

function animate() {
  requestAnimationFrame(() => {
    element.style.transform = 'translateX(100px)'; // 使用transform避免回流
    element.style.opacity = '0.5';
  });
}

4. 脱离文档流

对频繁变动的元素使用position: fixed/absolute，使其脱离正常文档流，减少对其他元素的影响：
```
.animation-element {
  position: fixed; /* 避免影响其他元素 */
}
```

5. 优先使用`transform`和`opacity`

这两个属性不会触发回流，仅触发合成层（Composite），性能最优：

/* 推荐 */
.element {
  transition: transform 0.3s;
}
.element:hover {
  transform: translateX(10px); /* 不触发回流 */
}

/* 不推荐（触发回流） */
.element:hover {
  margin-left: 10px;
}

6. 懒加载内容

对于长列表或复杂组件，使用虚拟滚动（如react-window、vue-virtual-scroller）减少DOM节点数量：

// 虚拟滚动示例
import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const App = () => (
  <FixedSizeList
    height={600}
    width={800}
    itemSize={35}
    itemCount={1000}
  >
    {Row}
  </FixedSizeList>
);

五、检测工具

Chrome DevTools Performance面板
- 录制页面性能，分析回流和重绘的耗时。
- 标记为Layout的事件表示回流，Paint表示重绘。
Lighthouse
- 分析页面性能，提供回流和重绘的优化建议。
浏览器开发者工具的Layout Shift标记
- 高亮显示页面中的布局偏移（Layout Shift），帮助定位回流问题。

六、总结

回流影响布局信息，重绘仅影响外观。
优化核心：减少回流次数，避免频繁读取布局信息，优先使用性能友好的CSS属性（如transform）。
现代框架（React、Vue）通过虚拟DOM和批量更新机制，已在底层优化了大部分回流问题，但手动优化仍有必要。

通过合理的代码设计和性能监控，可以有效减少回流和重绘，提升页面响应速度和用户体验。

一、基本概念​

1. 回流（Reflow）​

2. 重绘（Repaint）​

3. 关系​

二、触发回流的常见操作​

三、性能影响​

四、优化策略​

1. 批量修改样式​

2. 缓存布局信息​

反例（多次回流）​

优化（仅一次回流）​

3. 使用requestAnimationFrame​

4. 脱离文档流​

5. 优先使用transform和opacity​

6. 懒加载内容​

五、检测工具​

六、总结​