DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!
CSS 中的 will-change
属性通过让浏览器知道哪些属性和元素即将被操作来优化动画,从而可能提高特定操作的性能。
语法
will-change: <animateable-feature> = scroll-position | contents | <custom-ident>
- 初始值:
auto
- 应用于:所有元素
- 继承:否
- 百分比:n/a
- 计算值:特定值
- 动画类型:不可动画
值
此属性有四个值
auto
:将应用标准浏览器优化。scroll-position
:表示元素的滚动位置将在不久的将来进行动画处理,因此浏览器将为元素滚动窗口中不可见的內容做好准备。contents
:预期元素的內容将发生更改,因此浏览器不会缓存此元素的內容。<custom-ident>
:任何用户定义的属性,例如transform
或opacity
,我们希望将will-change
应用于这些属性。
使用此属性
我们可以通知浏览器 transform
属性即将发生更改,如下所示
.element {
will-change: transform;
}
或者如果我们想声明多个值,我们可以使用逗号分隔的列表,例如
.element {
will-change: transform, opacity;
}
但是,重要的是不要过度使用 will-change
属性,因为它实际上可能会导致页面性能下降(请注意,出于充分的理由,此属性没有 all
值)。 因此,MDN 建议将此属性用作现有性能问题的最后手段,而不是您预计可能发生的性能问题。 并且,在使用它时,建议在元素或属性更改之前切换 will-change
,然后在过程完成后立即将其关闭。
其他资源
浏览器支持
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器在该版本及更高版本中支持此功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
36 | 36 | 否 | 79 | 9.1 |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 9.3 |
规范
will-change
在 CSS Will Change 模块级别 1 规范中定义,目前处于编辑草案状态。 这意味着此处和规范中提供的信息可能会在达到候选推荐之前发生变化。
谢谢兄弟;有帮助的文章。
所以……是否有任何迹象表明这仍然是一个有效的方法,并且实际上有助于提高性能?
它仍然是一个有效的方法,我用过几次来处理固定位置背景导致页面出现卡顿的问题,但它是一个非常利基的功能,很少需要,只有在存在重大问题时才能提高性能
我正在使用CSS开发一些动画,并且有一些点多个动画同时开始,导致整个动画不够流畅。所以我一直在寻找一些可以解决此问题的方法,并且我找到了这篇文章。
我尝试使用此规则,但不幸的是它似乎并没有改善动画流程。
有趣的是,Google似乎比MDN文档更推荐使用它,并且他们在关于它的文章https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance中并没有将其称为“最后手段”。这表明它在Chrome中可能更有帮助。
请注意,moz 文档中提到:“重要提示:`will-change` 旨在作为最后手段使用,以尝试解决现有的性能问题。不应将其用于预测性能问题。”
`will-change: opacity, contents` 怎么样?这有效吗?
是的!用逗号分隔值完全合法。规范有一些关于使用该属性的优秀技巧,其中之一是要注意不要在太多属性和元素上使用它。
大家好!
我知道这篇文章有点旧了,但有没有人遇到过在Chrome上将`will-change`属性应用于元素时它会变得有点模糊的情况?
试试这个解决方案,
以及
我们不会为更改编写css吗?