6.3 样式重排与重绘

6.3 样式重排与重绘

浏览器的渲染性能对用户体验至关重要。了解 样式重排（Reflow） 和 重绘（Repaint） 的机制以及它们对性能的影响，是优化页面性能的关键。

一、什么是样式重排与重绘？

1. 样式重排（Reflow）

样式重排发生在浏览器需要重新计算元素的布局时，例如位置、大小等。这是一个消耗性能的过程，因为它会影响整个渲染树。

触发样式重排的操作：

• 改变元素的几何属性（宽度、高度、边距、填充等）。
• 添加或删除 DOM 元素。
• 改变浏览器窗口大小。
• 获取某些属性（如 offsetHeight、offsetWidth）。

2. 重绘（Repaint）

重绘发生在元素的外观（颜色、背景等）发生变化时，而不涉及布局的变化。重绘比样式重排的开销小，但仍需要资源。

触发重绘的操作：

• 改变 color、background-color。
• 改变 visibility（非 display）。

二、样式重排与重绘的性能影响

1. 样式重排的开销

样式重排会递归地重新计算渲染树，导致性能显著下降。尤其是在高频操作中（如动画或滚动时触发），样式重排可能成为性能瓶颈。

2. 重绘的开销

虽然重绘不涉及布局计算，但仍需要耗费 GPU 或 CPU 来更新像素，尤其是复杂页面上的大范围重绘。

三、如何优化样式重排与重绘？

1. 避免频繁的样式更改

将多次样式更改合并为一次操作。

不推荐：

element.style.width = '100px';
element.style.height = '100px';
element.style.backgroundColor = 'red';

推荐：

element.style.cssText = 'width: 100px; height: 100px; background-color: red;';

2. 使用 class 替代内联样式

使用 class 切换样式会比直接更改内联样式性能更高。

示例：

// 不推荐
element.style.backgroundColor = 'blue';

// 推荐
element.classList.add('new-style');

3. 避免强制同步布局

某些属性（如 offsetWidth、offsetHeight）会触发浏览器立刻重新计算布局。尽量避免高频访问这些属性。

不推荐：

for (let i = 0; i < 100; i++) {
  console.log(element.offsetHeight);
}

推荐：

const height = element.offsetHeight;
for (let i = 0; i < 100; i++) {
  console.log(height);
}

4. 使用 documentFragment 操作 DOM

如果需要添加多个子元素，使用 documentFragment 减少多次操作带来的重排。

示例：

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = `Item ${i}`;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

5. 使用 CSS 动画而非 JavaScript 动画

CSS 动画（尤其是使用 GPU 加速的属性）通常比 JavaScript 动画性能更高。

推荐的 CSS 动画属性：

• transform
• opacity

示例：

.box {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.box:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

6. 对大范围的 DOM 操作使用离线模式

通过隐藏元素（display: none）或克隆元素到内存中，进行离线操作后再显示。

示例：

element.style.display = 'none';
// 执行大量 DOM 操作
element.style.display = 'block';

7. 避免全局样式重排

样式重排的影响是递归的，尽量避免影响全局的属性更改（如 html 或 body 的属性）。

四、工具与调试方法

1. 使用浏览器开发者工具

• Chrome DevTools：
  • 在 Performance 面板中分析重排和重绘。
  • 使用 Rendering 面板的“Paint Flashing”功能查看重绘区域。

2. Lighthouse 分析

使用 Lighthouse 获取优化建议，包括减少重排与重绘的操作。

五、总结

通过减少样式重排与重绘的次数，优化高频操作，优先使用 GPU 加速的 CSS 属性，可以显著提升页面性能。在现代前端开发中，理解并优化这些细节是高性能 Web 应用的基础。