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

【问题标题】：Which is faster for large layouts? CSS3, or jQuery?对于大型布局，哪个更快？ CSS3 还是 jQuery？
【发布时间】：2012-09-28 06:54:05
【问题描述】：

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

【问题讨论】：

这可能很大程度上取决于浏览器和设备，但从个人经验来看，我认为 JavaScript 通常比 CSS 慢。
我高度怀疑浏览器的原生 CSS 渲染器速度更快，但你为什么要问我们而不是自己测试呢？
我更喜欢 jQuery 而不是 css3，虽然 css3 会稍微快一些，因为 jQuery 有更多的浏览器支持...
一般来说，CSS 几乎总是会更快。但是，如果您对正在动画的元素有效果，尤其是 box-shadow，您可能会看到很多减速。
@Verandaguy：是的，它高度依赖于浏览器及其环境。对此没有一刀切的答案，尽管人们普遍认为 JS 比较慢。

标签： jquery css css-transitions css-animations

【解决方案1】：

编辑：查看这个animation speed test，它可以让您实时比较GreenSock Animation Platform 与其他一些能够动画的库（包括jQuery）的性能。 TweenLite (GreenSock) 的性能确实令人印象深刻，尤其是与 Zepto 基于 CSS3 的动画相比。

在性能方面，CSS3 动画比 jQuery 动画快得多。 (Source)

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

然而，正如文章中所说，jQuery 在浏览器兼容性方面要好得多，因为 IE 不支持 CSS3 过渡

【讨论】：

另外，this article 可能是相关的。
在基于 Webkit 和 Gecko 的浏览器中，MooTools 的表现似乎优于竞争对手。

【解决方案2】：

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

但它不是灵丹妙药，如果您的页面速度很慢，则需要对其进行优化。 Chrome 开发工具中的时间线选项卡很好地提示了导致缓慢的原因。您还可以在 chrome://flags 下启用“合成渲染层边框”。该选项显示哪个元素正在被 GPU 加速

您的悬停过渡可能会触发整个网站的 GPU 加速，从而导致速度变慢。如果是这样的话，一些放置得当的 z-index 可能会避免这个问题。

【讨论】：