我的白鲸:will-change 的用例

Avatar of Chris Coyier
Chris Coyier

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

 Nic Chan:

[…] will-change 属性于 2015 年 8 月 在主要浏览器中上线,从那时起我一直在寻找它的应用场景。它可能看起来很明显,应该将它应用于常用的动画属性,例如 transform 或 opacity,但 浏览器已经将它们归类为合成属性,因此,它们是少数几个你可以期待从一开始就拥有良好动画性能的属性。因此,遵循之前伟大开发者的建议,我谨慎地等待着合适的机会出现。

不久前在 ShopTalk 上我也在思考这个问题。我理解 will-change 背后的理念。它就像响应式图像或 DNS 预取:你为浏览器提供了有关你要做什么的额外信息,这样它可以在事情发生时进行优化。但是对于 will-change何时? 为什么没有一个简单的缩减测试用例演示来展示性能不佳的情况,然后应用 will-change,性能就变好了呢?

Nic 发现了一个可以直接使用的用例,其中一个悬停转换的伪元素在 Safari 中留下了一小块颜色,如果使用 will-change,它就会消失。我在最新版本的 Safari 中测试了它,发现情况确实如此。好吧,这是一个用例!

我希望能看到一个更明显、更直接的用例。我猜想最佳场景是在低功耗设备(仍然有 GPU,但足够新以了解 will-change 是什么)上。

直接链接 →