使用将更改属性而不是 translate3d 进行硬件加速有什么好处

What is advantage of using will-change property instead of translate3d for hardware acceleration?

本文关键字：硬件加速 什么 translate3d 属性      更新时间：2023-09-26

在有趣的文章中 你需要知道的关于CSS将改变属性的一切 它说，如果你想要硬件加速，使用translate3d()黑客是旧的做事方式，而不是你应该使用will-change。使用will-change时性能有什么好处吗？我发现在某些情况下，在元素触发动画之前通过 JavaScript 添加will-change是非常困难的。例如

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

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

  1. 如前所述，指定转换构成黑客攻击。 will-change是一个标准。

  2. 有关于何时使用will-change和何时不使用的指南（一般想法是谨慎使用它，并且仅在您需要时才使用它）。另一方面，许多作者建议使用转换黑客而不放弃。

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

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

will-change本身并没有更好的性能——事实上，它在高层次上与转换黑客几乎相同。性能提升主要来自明智地使用will-change因此您不会将系统资源浪费在不需要它们的事情上（请参阅上面的第 #2 点）。

相关文章：