css3動畫與js動畫的區別 css與 js動畫 優缺點比較

css與 js動畫 優缺點比較

 

咱們常常面臨一個抉擇：到底使用JavaScript仍是CSS動畫，下面作一下對比

JS動畫

缺點：(1)JavaScript在瀏覽器的主線程中運行，而主線程中還有其它須要運行的JavaScript腳本、樣式計算、佈局、繪製任務等,對其干擾致使線程可能出現阻塞，從而形成丟幀的狀況。

        (2)代碼的複雜度高於CSS動畫

優勢：(1)JavaScript動畫控制能力很強, 能夠在動畫播放過程當中對動畫進行控制：開始、暫停、回放、終止、取消都是能夠作到的。

        (2)動畫效果比css3動畫豐富,有些動畫效果，好比曲線運動,衝擊閃爍,視差滾動效果，只有JavaScript動畫才能完成

        (3)CSS3有兼容性問題，而JS大多時候沒有兼容性問題

CSS動畫

缺點：

   (1)運行過程控制較弱,沒法附加事件綁定回調函數。CSS動畫只能暫停,不能在動畫中尋找一個特定的時間點，不能在半路反轉動畫，不能變換時間尺度，不能在特定的位置添加回調函數或是綁定回放事件,無進度報告

   (2)代碼冗長。想用 CSS 實現稍微複雜一點動畫,最後CSS代碼都會變得很是笨重。

優勢： (1)瀏覽器能夠對動畫進行優化。

•  瀏覽器使用與 requestAnimationFrame 相似的機制，requestAnimationFrame比起setTimeout，setInterval設置動畫的優點主要是:1)requestAnimationFrame 會把每一幀中的全部DOM操做集中起來，在一次重繪或迴流中就完成,而且重繪或迴流的時間間隔牢牢跟隨瀏覽器的刷新頻率,通常來講,這個頻率爲每秒60幀。2)在隱藏或不可見的元素中requestAnimationFrame不會進行重繪或迴流，這固然就意味着更少的的cpu，gpu和內存使用量。
• 強制使用硬件加速 （經過 GPU 來提升動畫性能）

 

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動畫是優選方案。它可讓你將動畫邏輯放在樣式文件裏面，而不會讓你的頁面充斥 Javascript 庫。然而若是你在設計很複雜的富客戶端界面或者在開發一個有着複雜UI狀態的 APP。那麼你應該使用js動畫，這樣你的動畫能夠保持高效，而且你的工做流也更可控。因此，在實現一些小的交互動效的時候，就多考慮考慮CSS動畫。對於一些複雜控制的動畫，使用javascript比較可靠。