CSS转换是否比DOM动画执行得更好？

Question

我正在运行使用ScrollerJS进行数字滚动的内容。它支持两种模式：CSS转换和DOM动画。当我使用DOM动画模式时，我发现有时滚动不比CSS过渡更平滑。

所以我想知道CSS转换一般比DOM动画表现更好吗？有没有证据或测试证明这一点？

CSS转换：转换元素的CSS3 transition/transform属性

DOM动画：传统的DOM动画，可以连续改变CSS top属性。

Answer 1

简而言之，是的。在CSS中执行此操作允许浏览器对其进行优化，例如使用硬件加速。

如果您操纵DOM，浏览器通常必须重新渲染内容，这通常较慢。

DOM操作通常用于支持不支持CSS动画（或实现不当）的旧浏览器。

来自http://scrollerjs.pixelstech.net/#about

  

如果浏览器支持CSS转换，则CSS转换将是   动画的首选选项。

     

如果在旧浏览器中不支持CSS转换。 DOM   动画将自动选择。

然而，请注意，像往常一样，事情永远不会完全直截了当，并且没有一般化是完全正确的......有些javascript动画库可以与基于CSS的过渡/动画相媲美，甚至有时甚至超过它们，它们通常都是更灵活。这里有一些轻松的阅读：

http://davidwalsh.name/css-js-animation

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

Answer 2

这个问题并不难回答。

DOM动画使用你的CPU进行计算，因为动画在CPU上非常繁重，所以它有时会“延迟”＃39;这是当你在屏幕上看到人工制品时。

然而，

CSS3过渡能够使用硬件加速，它使用计算机的GPU（如果它有一个c：D）。由于你的GPU在动画方面更强大，更好，所以你几乎不会注意到任何延迟。

Answer 3

这个问题不容易回答，因为在不同的情况下，某种动画比另一种更好。

如果我们（严肃地）谈论CSS和DOM动画之间的表现，我认为这个article可能会非常有趣。

如果您打算使用动画进行大量工作，并且您担心我建议尝试更专业的库（如GSAP），那么它们也会有一个滚动插件。