使用will-change属性而不是translate3d进行硬件加速有什么好处？

Question

在有趣的文章Everything You Need to Know About the CSS will-change Property中，它说如果你想要硬件加速，使用translate3d() hack是一种旧的做事方式，而不是你应该使用will-change。使用will-change时，性能是否有任何好处？我发现在某些情况下，在元素触发动画之前通过JavaScript添加will-change非常困难。例如

1. 你不能只将will-change放在CSS中并期望它能够正常工作，因为如果你有多个元素会更糟糕。
2. 您无法将will-change放入:hover伪选择器中，因为浏览器需要一些时间来准备。
3. 您可以在点击事件上留下动画，当您可以通过JavaScript添加willChange时，让浏览器有足够的时间准备（200毫秒）。

总的来说，你必须以某种方式预测用户行为，这很困难。它太复杂了（你必须在动画结束后删除will-change）translate3d()。为何使用它？

Answer 1

1. 正如您已经说过的那样，指定转换构成了一个黑客攻击。 will-change是标准。

2. 有关于何时使用will-change以及何时不使用的指导原则（一般的想法是谨慎使用它，并且只在需要时使用）。另一方面，许多作者建议使用变换黑客而不放弃。

如果您希望用户以触发某些资源密集型视觉效果的方式与元素进行交互，请设置will-change。就那么简单。您不必预测用户何时或是否与元素交互并决定是否设置will-change - 您只需设置will-change并让浏览器担心其余部分。

您没有will-change 所有这些东西，但是当您希望某个属性在某个元素上发生更改时，请告诉浏览器该特定属性will-change关于那个具体要素。用户是否实际触发了特定页面加载或浏览会话中的更改与作者无关。

will-change本身并没有更好的性能 - 实际上，它与高级别的转换黑客几乎完全相同。性能提升主要来自于will-change的明智使用，因此您不会将系统资源浪费在不需要它们的事物上（参见上面的第2点）。