改善CSS3動畫的性能

Question

我的網站在FireFox上運行非常出色，但在Chrome上卻很雜亂。 這是一個完整的動畫網站，包含許多CSS3滾動動畫，這些動畫通過jQuery航路點觸發，並且我編寫了一個腳本來添加和刪除滾動類。

有沒有辦法強迫它在Chrome瀏覽器上表現更好？

這是網站： http : //www.aikoncreative.com/

Answer 1

情況很復雜。 您正在使用jQuery動畫，但存在一些麻煩：

1. jQuery.animate與css動畫相比，性能較差，因為它不使用gpu，而僅使用cpu，因此移動效果不如css過渡平滑。
2. jQuery.animate不使用requestAnimationFrame來執行動畫。 它使用setTimeout或setInterval，因此性能最差。

我的建議是嘗試避免jQuery動畫功能，創建CSS類以創建本機CSS動畫，並在滾動AND（非常重要）時添加類，使用requestAnimationFrame優化滾動事件，並盡可能減少計算。

請閱讀Paul Lewis撰寫的這篇文章，該文章非常棒： http : //www.html5rocks.com/en/tutorials/speed/animations/

（編輯）添加更多信息：我使用chrome開發工具深入了解了您的代碼中的一些細節，並且在功能步驟上看到文件SmoothScroll.js的嚴重瓶頸稱為：ssc_wheel => ssc_scroll =>功能步驟（33秒，63秒...）。 此功能“步驟”一次又一次地花費大量執行時間，因此cpu將被殺死。 為了增強性能，我建議首先使用requestAnimationFrame對其進行調用，然后我們可以再次查看是否有一些積極的效果（如果做得好，您會看到更好的增強）。 閱讀文章以增強requestAnimationFrame的滾動：）

在編輯代碼時，請記住這一點：“在諸如滾動之類的事件上，放置一個指示事件滾動的布爾變量，如果該變量的值為false，則將該變量設置為true，然后使用以下命令調用函數以檢查或更新動畫像'requestAnimationFrame（animateMyPage）'這樣的requestAnimationFrame在函數'animateMyPage'中檢查滾動位置並將類添加到動畫對象中，但是要小心，如果要在框架中做很多工作，請盡量減少操作也將需要等待下一幀！在'animateMyPage'的末尾也設置為false，用於滾動事件，以避免不必要地調用requestAnimationFrame（'animateMyPage'）。

這些是一些步驟，但還有更多步驟，但是，請首先嘗試進行此增強。