CSS3動畫和JS動畫的比較

前言

以前有被問到一個問題，css3動畫和js動畫性能誰更好，爲何。據個人經驗，固然以爲css3動畫性能更好，至於爲何一時還真答不上來，因此特地查了一下資料總結一波。

JS動畫

優勢：

1. js動畫控制能力強，能夠在動畫博凡過程當中對動畫進行精細控制，開始、暫停、終止、取消都是能夠作到的
2. 動畫效果比css3動畫豐富，好比曲線運動，衝擊閃爍，視差滾動效果，只有js動畫才能完成
3. js動畫大多數狀況下沒有兼容性問題，而css3動畫有兼容性問題

缺點

1. js動畫的複雜度高於css3
2. js在動畫瀏覽器的主線程中執行，而主線程還有其餘javaScript腳本，樣式計算、佈局、繪製任務等，對其干擾可能出現阻塞從而出現丟幀的狀況
3. js動畫每每須要頻繁操做DOM的css屬性來實現視覺上的動畫效果，這個時候瀏覽器要不停地執行重繪和重排，這對於性能的消耗是很大的，尤爲是在分配給瀏覽器的內存沒那麼寬裕的移動端。

CSS3動畫

優勢：

1. 部分狀況下瀏覽器能夠對動畫進行優化，爲何說部分狀況下呢，由於是有條件的：
   • 在Chromium基礎上的瀏覽器中

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

     在主線程中，維護了一棵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也會處理滾動消息，滾動已經被提交的頁面部分（未被提交的部分將被刷白）。

2. 部分效果能夠強制使用硬件加速 （經過 GPU 來提升動畫性能）

缺點

1. 運行進程控制較弱，css3動畫只能在某些場景下控制動畫的暫停與繼續，不能在特定的位置添加添加回調函數
2. js在動畫瀏覽器的主線程中執行，而主線程還有其餘javaScript腳本，樣式計算、佈局、繪製任務等，對其干擾可能出現阻塞從而出現丟幀的狀況

css動畫比js動畫流暢的前提

• js在執行一些複雜的任務
• css動畫比較少或者不觸發pain和layout，即重繪和重排，例如經過改變以下屬性生成的css動畫
  • backface-visibility
  • opacity
  • perspective （設置元素視圖）
  • perspective-origin
  • transfrom
• 部分屬性可以啓動3D加速和GPU硬件加速，例如使用transform的translateZ進行3D變換時
• 在Chromium基礎上的瀏覽器中，這個貌似是內核作了優化，當css動畫知識改變transfrom和opacity時，整個CSS動畫得以在compositor thread完成（而JS動畫則會在main thread執行),這樣css動畫渲染不會影響主線程。

### 總結
迴歸到平常開發中，當有一個動畫的需求時，首要考慮的確定是能不能儘量實現的問題。若是在CSS動畫和JS動畫都能實現的基礎上纔會要去根據上面總結的權衡哪一個性能更好的問題。總之，並不必定css動畫就比js動畫好，還得看具體的需求和業務場景。

參考文章

• css3動畫與js動畫的區別
• CSS3動畫和js動畫各有什麼優劣
• css3動畫與js動畫的一些理解