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

Javascript 使用will change属性而不是translate3d进行硬件加速有什么好处?,javascript,css,Javascript,Css,在这篇有趣的文章中,它说如果您想要硬件加速,使用translate3d()hack是一种老方法,而您应该使用将改变。当使用将发生变化时,性能是否有任何好处?我发现,在某些情况下,在元素触发动画之前,通过JavaScript添加将更改,是非常困难的。比如说 你不能仅仅把的will change放在CSS中,期望它能工作,因为如果你有多个元素,情况会更糟 您不能在:悬停伪选择器中放置将更改,因为浏览器需要一些时间来准备 点击事件留下动画,此时可以通过JavaScript在悬停时添加willChang

在这篇有趣的文章中,它说如果您想要硬件加速,使用
translate3d()
hack是一种老方法,而您应该使用
将改变
。当使用
将发生变化时,性能是否有任何好处?我发现,在某些情况下,在元素触发动画之前,通过JavaScript添加
将更改
,是非常困难的。比如说

  • 你不能仅仅把
    的will change
    放在CSS中,期望它能工作,因为如果你有多个元素,情况会更糟
  • 您不能在
    :悬停
    伪选择器中放置
    将更改
    ,因为浏览器需要一些时间来准备
  • 点击事件留下动画,此时可以通过JavaScript在悬停时添加
    willChange
    ,让浏览器有足够的时间准备(200毫秒)
  • 总的来说,您必须以某种方式预测用户的行为,这是很困难的。对于
    translate3d()
    ,它太复杂了(您还必须删除
    将在动画结束后更改
    )。为什么要用它

  • 正如您已经说过的,指定转换构成了一种攻击<代码>将更改
  • 是标准

  • 关于何时使用<代码>会改变
  • 和何时不使用,有一些指导原则(一般的想法是在需要的时候节约使用)。另一方面,许多作者建议不要放弃使用transform hack

    如果您希望用户以某种触发资源密集型视觉效果的方式与元素交互,则set
    将更改。就这么简单。您不必预测用户何时或是否会与该元素交互,也不必决定是否设置
    将更改
    ——您只需设置
    将更改
    ,让浏览器担心其余的事情

    您不会更改所有内容,但当您希望某个元素上的某个属性发生更改时,请告诉浏览器该特定属性将更改该特定元素上的某个属性。用户是否真的触发了特定页面加载或浏览会话中的更改与作者无关


    将改变
    本身并没有更好的性能-事实上,它在高层次上与转换黑客做了几乎相同的事情。性能提升主要来自明智地使用
    将发生变化
    ,这样您就不会将系统资源浪费在不需要它们的东西上(请参见上文第2点)。

    查看这两篇文章以获得更多详细信息:在发布问题之前,我已经阅读了所有这些文章。查看我的链接文章以澄清我的问题。@JeremyBanks我已经更新了帖子,希望对你有所帮助@谢谢!我不知道
    会改变
    。读起来很有趣……据我所知,她是发布链接的作者,她的意思是如果可能发生更改,应该添加
    将更改
    ,然后将其删除。这增加了另一层复杂性,您必须考虑触发
    的内容将更改要添加的属性,并且在动画实际触发之前,浏览器是否有足够的时间进行优化。顺便问一下,什么是不放弃的
    转换黑客
    ?这个黑客仍然是一个选项吗?@Legends:“transform hack”是问题中提到的translate3d()黑客。“不放弃”仅仅是一个英语表达,意思是“不加区别地和过度地”,它不是一个CSS术语。