使用jQuery fadeIn或CSS3动画更好吗？

Question

我正在使用一些PHP和JavaScript创建一个简单的库,我正在尝试在图像之间进行淡入淡出过渡.然后我想知道使用CSS动画之间是否存在性能差异,例如:

@-webkit-keyframes fadeIn {
0%   { opacity: 0; }
100% { opacity: 1; }
}

和一个jQuery淡入淡出.

我想使用fadeIn的回调,但我也可以使用带有CSS的计时器.

对于大图像,这些中的任何一个都可能更好吗？我看不出有什么不同,但想知道它是否会影响较慢的计算机.

Answer 1

一个人有一个倒退到另一个怎么样？尽可能使用CSS3过渡,并使用诸如Modernizr之类的功能检测库来确定用户的浏览器是否能够进行CSS3过渡.

如果只有用户的浏览器不支持本机动画,那么只有你应该使用jQuery.

原生动画是GPU加速的,从而减少了对CPU的约束,并使动画更加流畅.此外,它不需要JAVASCRIPT,也不需要额外的请求.

Answer 2

好吧,我认为当有支持的浏览器时,使用CSS动画要好得多,你应该只使用jQuery作为不支持的浏览器的备份.正如http://dev.opera.com/articles/view/css3-vs-jquery-animations中详细解释的那样,他们使用CSS和jQuery同时对300个div进行了动画测试,并注意到它们之间的巨大差异.绩效统计.

使用CSS动画的统计数据是:

- 完成动画所执行的操作数:100
- 完成动画执行所需的时间:2.9秒
- 动画结束时消耗的内存:1.5 MB

和使用jQuery的统计数据是:

- 完成动画所执行的操作数:2119
- 完成动画执行所需的时间:5秒
- 动画结束时消耗的内存:6 MB

因此,正如您所看到的,性能之间存在很大差异.这是因为浏览器的CSS处理器是用C++编写的,本机代码执行速度非常快,而jQuery(JavaScript)是一种解释型语言,浏览器无法及时预测JavaScript,就接下来会发生什么事件而言,限制浏览器优化它以提高性能.我希望能回答你的问题.