javascript - 使用 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 毫秒)。

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

Answer 1

1. 正如您已经说过的，指定转换构成 hack。 will-change 是一个标准。

2. 有关于何时使用 will-change 以及何时不使用的指导方针(总体思路是谨慎使用，仅在需要时使用)。另一方面，许多作者建议毫不放弃地使用转换 hack。

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

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

will-change 本身并没有更好的性能——事实上，它在高层次上做的事情与 transform hack 几乎相同。性能提升主要来自于明智地使用 will-change，这样您就不会将系统资源浪费在不需要它们的事情上(参见上面的第 2 点)。