will-change

Avatar of Robin Rendle
Robin Rendle

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!

CSS 中的 will-change 属性通过让浏览器知道哪些属性和元素即将被操作来优化动画,从而可能提高特定操作的性能。

语法

will-change: <animateable-feature> = scroll-position | contents | <custom-ident>
  • 初始值: auto
  • 应用于:所有元素
  • 继承:
  • 百分比:n/a
  • 计算值:特定值
  • 动画类型:不可动画

此属性有四个值

  • auto:将应用标准浏览器优化。
  • scroll-position:表示元素的滚动位置将在不久的将来进行动画处理,因此浏览器将为元素滚动窗口中不可见的內容做好准备。
  • contents:预期元素的內容将发生更改,因此浏览器不会缓存此元素的內容。
  • <custom-ident>:任何用户定义的属性,例如 transformopacity,我们希望将 will-change 应用于这些属性。

使用此属性

我们可以通知浏览器 transform 属性即将发生更改,如下所示

.element {
  will-change: transform;
}

或者如果我们想声明多个值,我们可以使用逗号分隔的列表,例如

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

但是,重要的是不要过度使用 will-change 属性,因为它实际上可能会导致页面性能下降(请注意,出于充分的理由,此属性没有 all 值)。 因此,MDN 建议将此属性用作现有性能问题的最后手段,而不是您预计可能发生的性能问题。 并且,在使用它时,建议在元素或属性更改之前切换 will-change,然后在过程完成后立即将其关闭。

其他资源

浏览器支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器在该版本及更高版本中支持此功能。

桌面

ChromeFirefoxIEEdgeSafari
3636799.1

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
1271271279.3

规范

will-changeCSS Will Change 模块级别 1 规范中定义,目前处于编辑草案状态。 这意味着此处和规范中提供的信息可能会在达到候选推荐之前发生变化。