JS動畫與CSS動畫

1、JS動畫（setInterval setTimeOut requestAnimationFrame）

優勢：

　　1）過程控制能力強。能夠對動畫工程進行精準的控制，暫停、取消、開始、終止均可以。

　　2）動畫效果多、炫酷。有一些效果是CSS動畫所不能實現的

　　3）兼容性比較高

缺點：

　　　1）因爲JS是經過不斷的操做DOM和CSS的屬性來實現動畫效果的，這須要不斷的重排（reflow）和重繪（repaint），很是消耗瀏覽器的內存。（在PC端有瀏覽器能夠分配的內存比較大，動畫的重排（reflow）和重繪（repaint）能夠忽略不計，可是在移動端效果很是明顯）

　　　2）JS動畫在主線程中執行，因爲主線程中還有其餘的JavaScript腳本等須要執行，對主線程進行干擾有可能形成丟幀的問題。

　　　3）較CSS動畫複雜

　　　4）因爲JS動畫的異步處理致使動畫開始執行的時間不能準確控制

2、CSS動畫（transition transform animation）

優勢：

　　1）瀏覽器能夠進行優化

　　　　　　如何優化：

　　　　　　　　① 瀏覽器使用與requestAnimationFrame 相似的機制，比起比起setTimeout，setInterval設置動畫的優勢是

　　　　　　　　　　*requestAnimationFrame 會把一幀中的全部DOM操做集中起來，在一次重繪或者回流中就完成。而且刷新頻率與瀏覽器相同

　　　　　　　　　　*在隱藏或不可見的元素中requestAnimationFrame不會進行重繪或者回流，因此會使用更少的CPU GPU和內存使用量

　　　　　　　　② 部分屬性可以啓動3D加速和GPU硬件加速（經過GPU來提升動畫性能），例如使用transform的translateZ進行3D變換時

　　　　　　

　　2）代碼簡單，性能調優方向固定。

　　3）對於幀速表現很差的低版本瀏覽器，CSS3能夠作到天然降級，而JS則須要撰寫額外代碼

缺點：

　　1）對動畫工程沒法控制，只能在特定場合暫停取消，不能添加回調函數

　　2）兼容性很差

3、性能問題

一、CSS 2D矩陣動畫效率高於js利用margin和left,top模擬的矩陣動畫（CSS3的2D動畫是指是2D矩陣Transform變化，好比縮放＼變形＼x軸＼y軸（js固然是不能作變形動畫的））

例如，使用CSS3的transform作translateXY動畫比js中的position left，position right快了近700mm!並且也更流暢

　　　

二、CSS3其它常規動畫屬性的效率均低於js模擬的動畫（常規動畫屬性在這裏是指：height，width,opacity,border-width,color…..）

4、

CSS動畫流暢的緣由

渲染線程分爲main thread(主線程)和compositor thread(合成器線程)。
若是CSS動畫只是改變transform和opacity，這時整個CSS動畫得以在compositor thread完成（而JS動畫則會在main thread執行，而後觸發compositor進行下一步操做）
在JS執行一些昂貴的任務時，main thread繁忙，CSS動畫因爲使用了compositor thread能夠保持流暢，

在主線程中，維護了一棵Layer樹（LayerTreeHost），管理了TiledLayer，在compositor thread，維護了一樣一顆LayerTreeHostImpl，管理了LayerImpl，這兩棵樹的內容是拷貝關係。所以能夠彼此不干擾，當Javascript在main thread操做LayerTreeHost的同時，compositor thread能夠用LayerTreeHostImpl作渲染。當Javascript繁忙致使主線程卡住時，合成到屏幕的過程也是流暢的。
爲了實現防假死，鼠標鍵盤消息會被首先分發到compositor thread，而後再到main thread。這樣，當main thread繁忙時，compositor thread仍是可以響應一部分消息，例如，鼠標滾動時，加入main thread繁忙，compositor thread也會處理滾動消息，滾動已經被提交的頁面部分（未被提交的部分將被刷白）。

CSS動畫比JS流暢的前提：

• JS在執行一些昂貴的任務
• 同時CSS動畫不觸發layout或paint
  在CSS動畫或JS動畫觸發了paint或layout時，須要main thread進行Layer樹的重計算，這時CSS動畫或JS動畫都會阻塞後續操做。

     只有以下屬性的修改才符合「僅觸發Composite，不觸發layout或paint」：

• backface-visibility
• opacity
• perspective
• perspective-origin
• transfrom

因此只有用上了3D加速或修改opacity時，css3動畫的優點纔會體現出來。

     (2)代碼相對簡單,性能調優方向固定

     (3)對於幀速表現很差的低版本瀏覽器，CSS3能夠作到天然降級，而JS則須要撰寫額外代碼

 

總結：因此簡單的不須要對中間過程進行過多控制的使用CSS動畫；效果交互複雜的使用JS動畫