掌握 Web 動畫：CSS 與未優化和優化的 JavaScript 效能

網頁動畫可以顯著改善使用者體驗，但如果實施不仔細，也會影響網站效能。在本文中，我將比較三種不同的方法來對大小脈衝的圓形元素進行動畫處理。我將使用 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 毫秒

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

---

優化的 JavaScript 動畫

來源：由 TomasDevs 建立 (2024)

• 總阻塞時間：400 毫秒

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

---

未優化的 JavaScript 動畫

來源：由 TomasDevs 建立 (2024)

• 總阻塞時間：440 毫秒

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

---

結論

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

加入討論

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

以上是掌握 Web 動畫：CSS 與未優化和優化的 JavaScript 效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！