What Does will-change In CSS Do?
9 months ago
- #Animations
- #Performance
- #CSS
- `will-change` CSS属性是向浏览器提供的性能优化提示，表明元素的某些属性即将发生变化。
- 浏览器可能会通过将元素提升到独立的GPU合成层、预分配内存来响应，若认为不必要也可能忽略该提示。
- 浏览器渲染流程包含三个步骤：布局（CPU处理）、绘制（CPU与内存）、合成（GPU处理）。
- `will-change`能跳过布局和绘制步骤（针对`transform`和`opacity`等合成器友好属性），让GPU流畅处理动画。
- 未使用`will-change`时，浏览器仅在动画开始时才将元素提升到独立层，可能导致首帧卡顿。
- `will-change`可在空闲时间预提升元素，确保动画从第一帧开始就保持流畅。
- 高效使用`will-change`需指定具体属性（如`transform`、`opacity`），而非笼统声明`all`。
- `transform`、`opacity`、`filter`、`clip-path`和`mask`等属性最能受益于`will-change`，而`top`或`background`等属性几乎无性能提升。
- 应谨慎且有节制地使用`will-change`，因其计算开销较大，过度使用反而可能损害性能。
- 现代浏览器已对动画做了优化，但`will-change`对需要首帧即流畅的复杂动画仍至关重要。