網頁動畫可以顯著改善使用者體驗，但如果實施不仔細，也會影響網站效能。在本文中，我將比較三種不同的方法來對大小脈衝的圓形元素進行動畫處理。我將使用 CSS、未優化的 JavaScript 和優化的 JavaScript，並且我將向您展示如何使用 Chrome DevTools 來衡量它們的效能。

網頁動畫簡介

動畫是現代網頁設計的關鍵部分。它們可以使用各種方法來實現，最常見的是使用純 CSS 或 JavaScript。然而，並非每種方法都表現得一樣好。為了證明這一點，我決定測試三種不同的方法：

• 使用 CSS 創建的動畫。
• 使用 JavaScript 未優化的動畫。
• 使用 JavaScript 和 requestAnimationFrame 優化動畫。

設定項目

此專案可在 GitHub 上取得。您可以輕鬆下載並試用。

git 克隆 https://github.com/TomasDevs/animation-performance-test.git
cd 動畫效能測試

下載後，檢查資料夾 css-animation、js-animation-optimized 和 js-animation-unoptimized。

在 GitHub 上嘗試此專案

衡量績效

為了測量效能，我使用了 Chrome DevTools 的效能面板。每個動畫運行 10 秒。

績效結果與分析

CSS動畫

來源：由 TomasDevs 創建 (2024)

• 總阻塞時間： 390 ms

筆記：
CSS 動畫往往表現得更好，因為它們被卸載到瀏覽器的本機渲染引擎，特別是在使用變換或不透明度等屬性時。該動畫非常高效，對腳本和渲染時間的影響最小。

優化的 JavaScript 動畫

來源：由 TomasDevs 創建 (2024)

• 總阻塞時間： 400 ms

筆記：
最佳化的 JS 版本使用 requestAnimationFrame 和平滑的正弦波函數來管理動畫。雖然它比 CSS 動畫需要更多的腳本編寫時間，但它仍然運行得相當高效，並保持較低的渲染和繪製時間。

未優化的 JavaScript 動畫

來源：由 TomasDevs 創建 (2024)

• 總阻塞時間： 440 ms

筆記：
未最佳化的 JS 版本使用簡單的循環，沒有考慮時序進展。由於動畫每一幀的計算效率低下，這會導致腳本、渲染和繪畫時間更長。

結論

• CSS 動畫 對於簡單動畫來說整體來說效率最高。它們受益於瀏覽器的硬體加速並減少主線程的負載。
• 優化的 JavaScript 動畫緊追在後。當您需要對動畫進行更多動態控制時，使用 requestAnimationFrame 進行最佳化對於確保流暢的效能至關重要。
• 未優化的 JavaScript 動畫表現最差，因為運算效率低下，它們給瀏覽器的渲染引擎帶來了不必要的壓力。

加入討論

您在優化網頁動畫方面有哪些經驗？您還有其他提高效能的提示或技巧嗎？請在下面的評論中告訴我！