CSS 的 will-change 属性详解

介绍

will-change 属性是一个新的 CSS 属性，用于告诉浏览器一个元素即将发生哪些变化，以便浏览器可以在这些变化之前做出优化。通过使用 will-change，我们可以有效地减少浏览器的重排和重绘，从而提高页面性能。

语法

selector {
  will-change: <property> | auto;
}

其中 <property> 表示属性名称，多个属性可以用逗号分隔。

可选值

auto: 默认值，表示没有指定特定的属性。
<property>: 指定要进行优化的属性，多个属性用逗号分隔。

如何使用

单个属性优化

.element {
  will-change: transform;
}

上面的代码告诉浏览器，.element 元素即将发生变换，浏览器需要对该元素进行优化。

多个属性优化

.element {
  will-change: transform, opacity;
}

上面的代码告诉浏览器，.element 元素即将发生变换和透明度变化，浏览器需要对该元素进行优化。

停止优化

如果不再需要优化，可以将 will-change 属性设置为 auto，或者将其删除。

.element {
  will-change: auto;
}

优化效果

使用 will-change 属性可以有效地减少浏览器的重排和重绘次数，从而提高页面性能。

例如，在下面的代码中，当我们移动 .element 元素时，浏览器需要对该元素进行重排和重绘：

.element {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 1s;
}

.element.active {
  transform: translateX(100px);
}

但是，如果我们添加 will-change 属性来告诉浏览器 .element 元素即将发生变换，浏览器就可以在动画开始之前对该元素进行优化，从而避免了不必要的重排和重绘：

.element {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 1s;
  will-change: transform;
}

.element.active {
  transform: translateX(100px);
}

注意事项

will-change 属性应该只用于需要进行优化的元素，而不是所有元素。
不要滥用 will-change 属性。过多的 will-change 属性可能会导致浏览器出现问题，因为浏览器需要花费更多的资源来对元素进行优化。
对于一些已经进行了优化的属性，如 transform 和 opacity，可以不再使用 will-change 属性，因为浏览器已经自动对这些属性进行了优化。

结论

will-change 属性可以有效地减少浏览器的重排和重绘次数，从而提高页面性能。但是，在使用时需要注意不要滥用，只对需要进行优化的元素使用，避免出现不必要的问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/33777

【翻】：CSS 的 will-change 属性详解