使用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，就接下來會發生什么事件而言，限制瀏覽器優化它以提高性能。 我希望能回答你的問題。