使用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，就接下来会发生什么事件而言，限制浏览器优化它以提高性能。 我希望能回答你的问题。