前言

之前有被問到一個問題，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動畫的一些理解

CSS3動畫和JS動畫的比較