教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

CSS動畫和JS動畫缺點和優(yōu)點分別是什么?

更新時間:2021年01月22日11時56分 來源:傳智教育 瀏覽次數(shù):

JS動畫

缺點：
1）JavaScript在瀏覽器的主線程中運行，而主線程中還有其它需要運行的JavaScript腳本、樣式計算、布局、繪制任務等,對其干擾導致線程可能出現(xiàn)阻塞，從而造成丟幀的情況。
2）代碼的復雜度高于CSS動畫

優(yōu)點：
1）JavaScript動畫控制能力很強, 可以在動畫播放過程中對動畫進行控制：開始、暫停、回放、終止、取消都是可以做到的。
2）動畫效果比css3動畫豐富,有些動畫效果，比如曲線運動,沖擊閃爍,視差滾動效果，只有JavaScript動畫才能完成
3）CSS3有兼容性問題，而JS大多時候沒有兼容性問題

1611287227189_CSS動畫和JS動畫的區(qū)別.jpg

CSS動畫

缺點：
1）運行過程控制較弱,無法附加事件綁定回調函數(shù)。CSS動畫只能暫停,不能在動畫中尋找一個特定的時間點，不能在半路反轉動畫，不能變換時間尺度，不能在特定的位置添加回調函數(shù)或是綁定回放事件,無進度報告
2）代碼冗長。想用 CSS 實現(xiàn)稍微復雜一點動畫,最后CSS代碼都會變得非常笨重。

優(yōu)點：
瀏覽器可以對動畫進行優(yōu)化。
瀏覽器使用與 requestAnimationFrame 類似的機制，requestAnimationFrame比起setTimeout，setInterval設置動畫的優(yōu)勢主要是：
A）requestAnimationFrame 會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成,并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率,一般來說,這個頻率為每秒60幀。
B）在隱藏或不可見的元素中requestAnimationFrame不會進行重繪或回流，這當然就意味著更少的的cpu，gpu和內存使用量。
強制使用硬件加速 （通過 GPU 來提高動畫性能）



猜你喜歡：

什么是事件委托？JS事件委托的實現(xiàn)原理

JavaScript如何遍歷數(shù)組？

CSS3如何設置顏色不透明度？

傳智教育web前端課程

0 分享到：
和我們在線交談！