JS動畫比CSS3動畫性能誰更好？

01-14

之前一直以為css3的才是最厲害的，但是最近做HTML5頁面發現在微信上的效果不是太好。
最近發現的github上比較火的velocity.js，作者宣稱要做DOM動畫方面的領導者，完全顛覆了我的認識啊。
相關鏈接：
CSS vs. JS Animation: Which is Faster?

稍微做過一點點 Web App，目前深陷在 Android Webview 里不能自拔，來談一點看法。

1. 在現代PC 瀏覽器上，CSS3 Animation 和 Transition 好寫好用，流暢絲滑，而且動畫過程0 GC。當然js 控制DOM動畫如果控制好了，不要頻繁reflow，動畫也流暢。

2. 在 iOS Safari 上，CSS3 動畫和js動畫都容易搞流暢，只要別reflow。

3. 在 iOS Webview 上，不能用jit，js性能下降嚴重，如果CSS3動畫能解決還是別用js。某個版本iOS之後這個限制解除了好像，不太了解。

4. 低版本 Android 用的是很老的 Webkit，沒有硬體加速，CSS3支持不完全，2d Canvas有bug，性能比chrome 差老遠了，如果動畫複雜又大塊，DOM樹複雜，還用了box-shadow 之類很耗性能的樣式，很難做流暢。

這種情況請考慮 Chrome on Android，或者crosswalk。

5. Android 4.4 以後，系統自帶chromium，體驗能做到與iOS safari不相上下。

====

另外多提一句GC。

GC 你聽過吧？如果不用CSS3 Animation 和 Transition，就要用 requestAnimationFrame() 。在動畫的過程中會不斷調用js，消耗內存，一段時間之後觸發GC，如果GC時間超出frame budget，動畫會卡頓。

如果非要用js動畫，那麼也請考慮使用無reflow 的 transform屬性，加上 translateZ(0) 強制指定硬體加速。

JS 動畫也是通過更改 CSS 實現的。

而且從設計的角度來說，CSS 本身就是設計用來表現樣式，JS 控制邏輯。JS 動畫是 CSS3 出現之前的曲線救國。

個人覺得，簡單的動畫還是用 CSS 做，特別複雜的再用 JS。

codepen 上面的趨勢是去 JS 化，動畫一律用 CSS 實現。藉助 LESS 等預編譯語言可以做出很複雜的動畫。

性能的話，短期手機瀏覽器可能對 CSS3 支持不太好，但長期一定是會優於 JS 的。

css3的動畫適合dom樹不是很複雜的結構，是方便的小型動畫工具。對於大型動畫，建議用刷新頻率較高的庫，這些庫都是web animation的變種。

js+canvas(html5)+水平&>css3&>js+dom

JS動畫特指canvas動畫嗎？但是js也可以操作CSS做動畫呀。

性能方面，其實最主要的是看使用者的水平。

CSS雖然是由瀏覽器實現，按理在瀏覽器支持的前提下性能會更好，然而使用者如果加入了其他干擾，發生頻繁的重繪或者迴流，自然性能就差了。

JS我猜測是說的是Canvas動畫，因為他沒有迴流，所以自然性能比有迴流的CSS動畫性能要好了。

從原理上來說的話

CSS == iOS

JS == Android

（以20馬赫快速逃跑中

就說一點，JS動畫比CSS3動畫有控制，且沒有兼容性問題

其實這個。。。。。看引擎的。。。。

chrome上css3明顯流暢過js，IE11上的js動畫如絲般順滑。。。。

我覺得如果能用css3 Animation去做就用它來做，如果不能就再加js去控制

這種對比應該還是要來個例子。

這是前幾天我翻譯一篇文章時看到的對比Building Great Mobile Menus (為你的網站創建移動菜單）

對了，我的翻譯只是為了自己總結學習，有精簡很多。。建議看原文=-=

不是涉及複雜的計算,css明顯快，但是涉及到複雜的計算，比如點是不確定的，你還是要用js。

其實這種對比個人感覺沒什麼意義（可能是我水），在項目中，大多數情況下-0-你都要用js來計算。

動畫的性能的關鍵，不在於js執行的效率，而在於dom結構。所以css原生動畫，與js動畫並不會相差太大。

優化動畫性能，就要減輕dom，使用合理的定位方式，等等。

個人項目體會：

在沒有RAF時，css方式流暢度佔優。

有RAF後兩者相當。

js方式要求開發人員對js足夠熟悉，以避免引入其他問題

其實這點差別在實際大部分使用情況下並木有卵區別……