使用will-change属性与使用translate3d实现硬件加速相比，有哪些优点？

Question

在有趣的文章《关于CSS will-change属性，你需要知道的一切》中提到，如果想要硬件加速，使用translate3d() hack是一种旧的做法，而现在应该使用will-change。使用will-change是否会带来性能上的好处呢？我发现，在某些情况下，在元素触发动画之前通过JavaScript添加will-change非常困难。例如：

1. 你不能只在CSS中添加will-change并期望它起作用，因为如果有多个元素，效果会更差。
2. 你也不能只在:hover伪类选择器中添加will-change，因为浏览器需要一些时间来准备。
3. 你只能在点击事件上进行动画操作，这样你可以通过JavaScript在悬停时添加willChange，让浏览器有足够的时间来准备（200ms）。

总的来说，你必须预测用户的行为，这很困难。与translate3d()相比，will-change过于复杂（你还必须在动画结束后删除will-change）。那么，为什么要使用它呢？

- Alexa

---

请查看以下两篇文章以获取更多细节： https://developer.mozilla.org/en/docs/Web/CSS/will-change https://css-tricks.com/almanac/properties/w/will-change/ - Vitalii Petrychuk

在发布问题之前，我已经阅读了所有那些文章。请查看我的链接文章以澄清我的问题。 - Alexa

@JeremyBanks 我已经更新了帖子，希望能对你有所帮助！ - Alexa

@dasdsdsdsa 谢谢！我之前不知道 will-change。了解它很有趣... - Jeremy

Answer 1

1. 正如您已经提到的，指定一个转换是一种hack。而will-change则是一个标准。

2. 有关何时使用will-change和何时不使用的指导方针（通常的想法是节约使用它，只在需要时使用）。另一方面，许多作者建议无限制地使用变换hack。

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

您不需要将will-change应用于所有内容，但在您期望某个特定属性在某个特定元素上发生变化的那一刻，告诉浏览器该特定属性will-change在该特定元素上。无论用户是否实际上在该页面加载或浏览会话中触发了该变化，都与您作为作者无关。

will-change并没有本质上更好的性能——实际上，它与变换hack在高层次上做的事情基本相同。性能提升主要来自于对will-change的谨慎使用，以便不浪费系统资源在不需要它们的事情上（参见上面的第2点）。

- BoltClock

---

据我理解，发帖链接的作者的意思是，如果可能会发生变化，就应该添加“will-change”，然后再将其删除。这增加了另一层复杂性，你必须考虑什么情况下应该触发添加“will-change”属性，并且在动画实际触发之前浏览器是否有足够的时间进行优化。顺便问一下，“不放弃的变换hack”是什么？这个hack还是一个选项吗？ - Legends

@Legends： "transform hack" 是问题中提到的 translate3d() hack。"without abandon" 只是一个英语表达，意思是“不加选择地和过度地”，它不是 CSS 术语。 - BoltClock