2

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

4

2 回答 2

8

编辑：查看这个动画速度测试，它可以将GreenSock Animation Platform的性能与少数其他能够动画的库（包括 jQuery）进行实时比较。TweenLite (GreenSock) 的性能实际上相当可观，尤其是与 Zepto 基于 CSS3 的动画相比。

--

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

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

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

于 2012-10-08T04:23:41.207 回答
3

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

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

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

于 2012-10-08T05:38:18.737 回答