性能

重绘和重排（回流）

哪些 CSS 属性会触发重绘？

不影响布局，只影响外观的属性，如 color、background 等

哪些 CSS 属性会触发重排？

会影像部布局的属性，如宽高、margin、float 等

如何减少重绘和回流？

• 避免使用 Table 布局
• 对于需要频繁更新的元素，使用 position: absolute 或 fixed 脱离文档流
• 用 transform、opacity 属性代替 top/left 做动画，他们不会影响元素的布局和外观（不触发重绘和重排），只会触发合成

GPU 加速常用的 CSS 属性有哪些？

• transform
• opacity
• will-change
• filter（设置纯颜色或 null 时不会触发）

什么是 will-change

通过 will-change 来标记即将发生改变的属性，让浏览器为这些变化提前做准备。 对于 transform、opacity 等可以触发 GPU 加速的属性效果最佳。 本身有一定的性能消耗，尤其是对于不需要频繁变化的元素，will-change 会带来不必要的内存开销。

常见使用场景

针对场景：复杂动画、离屏预渲染

始终设置 will-change 将会造成一定的性能浪费，因此适合在动画过程中动态添加和移除。

.element {
  will-change: transform;
  transition: transform 0.3s ease;
}

.element.is-animating {
  transform: translateX(100px);
}

.element.is-animating.finished {
  will-change: unset; /* 动画完成后移除 will-change */
}