CSS vs JS動畫：誰更快？---簡單筆記

參考文章

為什麼基于 Javascript 的 DOM 動畫庫（比如 Velocity.js 和 GSAP）能夠比 jQuery 和基于 CSS 的動畫庫更高效。

jQuery 動畫

盡管 jQuery 異常強大，但是它的設計目标并不是一個高效的動畫引擎

CSS 動畫

CSS transition 的動畫邏輯是由浏覽器來執行，是以它的性能能夠比 jQuery 動畫好。它的優勢展現在：

通過優化 DOM 操作，避免記憶體消耗來減少卡頓

使用與 RAF 類似的機制

強制使用硬體加速 （通過 GPU 來提高動畫性能）

我的建議是：當你隻在移動平台上開發，并且動畫隻是簡單的狀态切換，那麼适合用純 CSS transition。在這種情況下，transition 是高性能的原生支援方案。它可以讓你将動畫邏輯放在樣式檔案裡面，而不會讓你的頁面充斥 Javascript 庫。然而如果你在設計很複雜的富用戶端界面或者在開發一個有着複雜UI狀态的 app。那麼我推薦你使用一個動畫庫，這樣你的動畫可以保持高效，并且你的工作流也更可控。有一個特别的庫做的特别棒，它可以用 Javascript 控制 CSS transition。這就是 Transit。

Javascript 動畫

是以 Javascript 可以比 CSS transition 性能更好。但是它到底有多塊呢？它快到足夠可以建構一個3D 動畫的demo，通常需要用到 WebGL 才能完成。并且它快到足夠搭建一個多媒體小動畫，通常需要 Flash 或者 After Effects 才能完成。并且它還快到可以建構一個虛拟世界，通常需要 canvas 才能完成。