CSS 的回流与重绘

CSS 回流（Reflow，也称重排）与重绘（Repaint）是前端性能优化中的核心概念。理解它们的触发机制、性能影响以及如何避免不必要的操作，对提升页面渲染效率至关重要。

一、基本概念

1. 回流（Reflow / Layout）

• 定义：当 DOM 结构或元素几何属性（如宽高、位置、字体大小等）发生变化时，浏览器需要重新计算元素的布局（即“布局树”），这个过程称为回流。
• 影响范围：可能影响整个文档，也可能只影响局部元素。
• 代价：高。因为涉及大量计算。

2. 重绘（Repaint / Redraw）

• 定义：当元素的外观（如颜色、背景、边框样式等）发生变化，但不影响布局时，浏览器只需重新绘制该元素，称为重绘。
• 影响范围：仅视觉层面。
• 代价：中等，比重流低，但仍需 GPU/CPU 资源。

注意：回流一定会触发重绘，但重绘不一定触发回流。

二、常见触发场景

触发回流的操作：

• 改变元素的 width、height、padding、margin、border-width
• 改变 position、top、left 等定位属性
• 添加/删除可见的 DOM 元素
• 内容变化（如文本长度改变）
• 浏览器窗口尺寸变化
• 调用 offsetWidth、clientHeight 等强制同步布局的属性（会触发“强制同步回流”）

触发重绘但不触发回流的操作：

• 改变 color、background-color、box-shadow（非扩散型）、visibility
• 使用 transform: translate()（不会触发回流！）
• 修改 opacity

三、动画性能优化建议

✅ 推荐使用 合成层（Compositing Layer） 动画

现代浏览器支持将某些元素提升为独立图层（通过 GPU 加速），避免影响主文档流。

最佳实践：

.animated-element {
  /* 提升为合成层 */
  will-change: transform; /* 或 opacity */
  /* 或使用 transform 触发新层 */
  transform: translateZ(0); /* hack 方式，不推荐滥用 */
}

/* 使用 transform 和 opacity 做动画 */
@keyframes slideIn {
  from { transform: translateX(-100px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

🔍 为什么 transform 和 opacity 高效？

• 它们不会触发回流或重绘，只在合成阶段由 GPU 处理。
• 属于“合成属性（compositing properties）”。

四、减少回流/重绘的策略

1. 批量修改样式

避免逐条修改样式，应合并操作：

// ❌ 差：多次触发回流
el.style.width = '100px';
el.style.height = '100px';
el.style.backgroundColor = 'red';

// ✅ 好：通过 class 一次性应用
el.className = 'new-style';

2. 使用文档片段（DocumentFragment）

批量操作 DOM 时，先在内存中构建，再插入：

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
list.appendChild(fragment); // 只触发一次回流

3. 避免强制同步布局

不要在写操作后立即读取布局属性：

// ❌ 危险：强制同步回流
container.style.height = container.clientHeight + 10 + 'px';

// ✅ 安全：分离读写
const height = container.clientHeight;
container.style.height = height + 10 + 'px';

4. 使用 requestAnimationFrame

将动画逻辑放入下一帧执行，避免阻塞：

function animate() {
  element.style.transform = `translateX(${x}px)`;
  x += 1;
  if (x < 100) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

五、工具检测

• Chrome DevTools > Performance 面板：录制页面交互，查看 Layout（回流）、Paint（重绘）、Composite（合成）时间。
• 关注 "Forced Synchronous Layout" 警告。

六、总结对比表

七、延伸阅读

• CSS Triggers：查看每个 CSS 属性触发的行为（Layout / Paint / Composite）
• Google Web Fundamentals - Rendering Performance