对于大型布局哪个更快？ CSS3，还是jQuery？

Question

我的网站上有一个流畅的布局，其中一个元素是动画的，并且在悬停时有一个转换。主要问题是在更宽的屏幕上（比如宽度大于1600px），CSS3悬停过渡变得明显不稳定，并开始吞噬内存。使用jQuery来实现这一点会使更大的显示效果更快吗？

Answer 1

编辑：查看此animation speed test，它可以让您对少数其他能够动画的库（包括jQuery）的GreenSock Animation Platform性能进行实时比较。 TweenLite（GreenSock）的性能实际上相当令人印象深刻，特别是与Zepto的基于CSS3的动画相比。

-

在性能方面，CSS3动画比jQuery动画要快得多。 （Source）

  

性能的巨大差异是因为浏览器的CSS处理器是用C ++编写的，而本机代码执行得非常快，而jQuery（JavaScript）是一种解释型语言，浏览器无法及时预测JavaScript，无论是什么事件接下来会发生。

然而，正如文章中所表达的那样，jQuery在浏览器兼容性方面要好得多，因为IE＆lt; = 9

不支持CSS3过渡

Answer 2

CSS3要快得多。它使用本机浏览器动画而不是javascript计时器。 CSS3动画也可以GPU加速。

但它没有银弹，如果你的页面很慢，你需要优化它。 Chrome开发者工具中的时间线选项卡提供了导致缓慢的原因的良好提示。您还可以在chrome：// flags下启用“Composited渲染层边框”。该选项显示哪个元素正在进行GPU加速

您的悬停转换可能会触发整个网站的GPU加速，从而导致速度缓慢。如果是这样的话，一些好的z-index可能会避免这个问题。