使用will-change属性而不是translate3d来加速硬件的优点是什么？

Question

在有趣的文章您需要了解的有关CSS的所有信息都会更改属性。中，它说，如果您想要硬件加速，那么使用translate3d()攻击是一种旧的方法，而不是使用will-change。当使用will-change时，性能有什么好处吗？我发现在某些情况下，在元素触发动画之前通过will-change添加JavaScript是非常困难的。例如

1. 您不能仅仅将will-change放在CSS中并期望它工作，因为如果您有多个元素，情况就会更糟。
2. 您不能将will-change放在:hover伪选择器中，因为浏览器需要一些时间来准备。
3. 当您可以通过willChange在JavaScript上添加鼠标悬停时，会留下足够的时间准备(200 on )。

总之，您必须以某种方式预测用户的行为，这是很困难的。这太复杂了(动画结束后还必须删除will-change )。为什么要用它？

Answer 1

1. 正如您已经说过的，指定转换就构成了黑客。will-change是一个标准。
2. 关于什么时候使用will-change和什么时候不使用它有一些指导方针(一般只在需要的时候谨慎地使用它)。另一方面，许多作者建议不加选择地使用转换黑客。

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

不是所有的东西都是will-change，但是当您期望某个属性在某个元素上发生变化时，告诉浏览器该特定属性will-change在该特定元素上。作为作者，用户是否实际触发特定页面加载或浏览会话中的更改与您无关。

will-change本质上没有更好的性能--事实上，它所做的与高级别的转换攻击几乎是一样的。性能提升主要来自于明智地使用will-change，因此您不会在不需要它们的事情上浪费系统资源(参见上文第2点)。