Javascript CSS转换是否比DOM动画表现更好？

我正在运行一个可以使用数字滚动的程序。它支持两种模式：CSS转换和DOM动画。当我使用DOM动画模式时，我发现有时滚动并不比CSS转换更平滑

所以我想知道CSS转换是否比DOM动画表现得更好？是否有任何证据或测试表明这一点

CSS transition:CSS3

transition/transform

转换元素的属性

---

DOM动画：连续更改CSS

top

属性的传统DOM动画。

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

如果操纵DOM，浏览器通常必须重新呈现内容，这通常会比较慢

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

从

如果浏览器支持CSS转换，则CSS转换将被禁用 动画的首选选项

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

然而，请注意，像往常一样，事情从来都不是完全直截了当的，没有一个概括是完全正确的。。。有一些javascript动画库可以与基于CSS的转换/动画相媲美，有时甚至可以超越它们，而且它们通常更灵活。下面是一些轻松的阅读：

---

这个问题不难回答

DOM动画使用您的CPU进行计算，并且由于动画在CPU上非常繁重，因此它有时会“滞后”，即当您在屏幕上看到人工制品时

---

但是，CSS3转换可以使用硬件加速，它使用计算机的GPU（如果它有一个ofc:D）。由于您的GPU更强大，更擅长制作动画，因此您几乎不会注意到任何延迟。

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

我认为，如果我们（认真地）讨论CSS和DOM动画之间的性能，这可能会非常有趣

---

如果你打算大量使用动画，并且担心性能问题，我建议你尝试一个更专业的库，例如，它们也有一个滚动插件。

为了补充你得到的一些答案，最好阅读以下资源：（当然，这是不久前写的，所以浏览器处理这个问题的方式可能已经改变了。）@Serlite这篇文章似乎表明CSS转换的性能较差…@PixelsTech这取决于库、动画类型以及它的实现情况。在您的例子中，ScrollerJS的作者告诉您哪种实现更好（如果可用），所以你可能应该相信他们。而且，你的编辑让回答更容易。CSS

transform

将始终击败动画

top

-你需要使用更复杂的技术来接近CSW的性能。如果我没有强大的GPU，你不需要有强大的GPU-你需要的那种操作我们在这里谈论的是，即使是10年的旧硬件也不会征税。但请注意我在上面补充的警告。