css3動畫和js動畫有哪些區別

這篇文章給大家分享的是有關css3動畫和js動畫有哪些區別的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

區別：1、js動畫的控制能力比css3動畫強；2、js動畫的效果比css3動畫豐富；3、js動畫大多數情況下沒有兼容性問題，而css3動畫有兼容性問題；4、js動畫的復雜度高于css3動畫。

本教程操作環境：windows7系統、CSS3&&javascript1.8.5版、Dell G3電腦。

JS動畫

優點：

• js動畫控制能力強，可以在動畫博凡過程中對動畫進行精細控制，開始、暫停、終止、取消都是可以做到的

• 動畫效果比css3動畫豐富，比如曲線運動，沖擊閃爍，視差滾動效果，只有js動畫才能完成

• js動畫大多數情況下沒有兼容性問題，而css3動畫有兼容性問題

缺點

• js動畫的復雜度高于css3

• js在動畫瀏覽器的主線程中執行，而主線程還有其他javaScript腳本，樣式計算、布局、繪制任務等，對其干擾可能出現阻塞從而出現丟幀的情況

• 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 來提高動畫性能）

缺點

• 運行進程控制較弱，css3動畫只能在某些場景下控制動畫的暫停與繼續，不能在特定的位置添加添加回調函數

• 代碼冗長。想用 CSS 實現稍微復雜一點動畫,最后CSS代碼都會變得非常笨重。

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動畫渲染不會影響主線程。

感謝各位的閱讀！關于“css3動畫和js動畫有哪些區別”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！