11

我正在使用一些 PHP 和 JavaScript 创建一个简单的画廊，并尝试在图像之间进行淡入淡出转换。然后我想知道使用 CSS 动画是否存在性能差异，例如：

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

和一个 jQuery 淡入淡出。

我想使用 fadeIn 的回调，但我也可以只使用带有 CSS 的计时器。

这些中的任何一个都可能更好地处理大图像吗？我看不出有什么区别，但想知道它是否会影响速度较慢的计算机。

4

2 回答 2

37

一个后备到另一个怎么样？尽可能使用 CSS3 过渡，并使用诸如 Modernizr 之类的特征检测库来确定用户的浏览器是否能够进行 CSS3 过渡。

如果且仅当用户的浏览器不支持原生动画时，您才应该使用 jQuery。

原生动画是 GPU 加速的，因此对 CPU 的限制更少，动画更流畅。此外，它不需要 JAVASCRIPT，也不需要额外的请求来完成。

于 2012-06-03T06:29:20.720 回答
6

好吧，我认为当有支持的浏览器时使用 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，就接下来会发生什么事件而言，这限制浏览器以优化其性能。我希望这能回答你的问题。

于 2013-10-04T20:24:07.207 回答