JS動畫
- js+dom：沒有兼容問題炫乓；
優(yōu)點：
js動畫控制能力強蒸矛，可以在動畫播放過程中對動畫進行精細控制，開始锻拘、暫停绪杏、終止下愈、取消都是可以做到的
動畫效果比css3動畫豐富，比如曲線運動蕾久，沖擊閃爍势似，視差滾動效果，只有js動畫才能完成
js動畫大多數(shù)情況下沒有兼容性問題僧著，而css3動畫有兼容性問題
缺點：
js動畫的復雜度高于css3
js在動畫瀏覽器的主線程中執(zhí)行履因，而主線程還有其他javaScript腳本，樣式計算盹愚、布局栅迄、繪制任務等，對其干擾可能出現(xiàn)阻塞從而出現(xiàn)丟幀的情況
js動畫往往需要頻繁操作DOM的css屬性來實現(xiàn)視覺上的動畫效果皆怕，這個時候瀏覽器要不停地執(zhí)行重繪和重排毅舆，這對于性能的消耗是很大的，尤其是在分配給瀏覽器的內存沒那么寬裕的移動端愈腾。
CSS3動畫
- css3兼容：IE10+憋活、FF、oprea（animation）虱黄；safari悦即、chrome（-webkit-animation）
優(yōu)點：
部分情況下瀏覽器可以對動畫進行優(yōu)化，為什么說部分情況下呢橱乱，因為是有條件的：在Chromium基礎上的瀏覽器中
同時CSS動畫不觸發(fā)layout或paint辜梳，在CSS動畫或JS動畫觸發(fā)了paint或layout時，需要main thread進行Layer樹的重計算仅醇，這時CSS動畫或JS動畫都會阻塞后續(xù)操作冗美。部分效果可以強制使用硬件加速 （通過 GPU 來提高動畫性能）
缺點：
運行進程控制較弱，css3動畫只能在某些場景下控制動畫的暫停與繼續(xù)析二，不能在特定的位置添加添加回調函數(shù)
總結
區(qū)別：
- 1.時間尺度上粉洼，keyframes動畫粒度粗，js的動畫粒度可以很精細叶摄；
- 2.CSS3里被支持的時間函數(shù)不多属韧，不夠零活；
- 3.css3動畫無法做到支持兩個狀態(tài)以上的轉換蛤吓；
- 4.CSS3更為簡單宵喂；
- 5.對于幀速表現(xiàn)不好的瀏覽器，CSS3可以做到自動優(yōu)雅降級会傲，JS還需要寫額外的代碼锅棕；
- 6.CSS3動畫有天然的事件支持（AnimationEnd/TransitionEnd）
- 7.CSS3有兼容性問題拙泽。
性能上：
js在動畫瀏覽器的主線程中執(zhí)行，而主線程還有其他javaScript腳本裸燎，樣式計算顾瞻、布局、繪制任務等德绿，對其干擾可能出現(xiàn)阻塞從而出現(xiàn)丟幀的情況
css動畫比js動畫流暢的前提
- 1.chrome基礎的瀏覽器荷荤；
- 2.js執(zhí)行一些昂貴的任務；
- 3.css動畫不觸發(fā)layout和paint移稳；（css3和js觸發(fā)layout和paint時都會阻塞后續(xù)操作）
以下屬性的修改不會觸發(fā)layout和paint：
backface-visibility
opacity
perspective （設置元素視圖）
perspective-origin
transfrom
部分屬性能夠啟動3D加速和GPU硬件加速蕴纳，例如使用transform的translateZ進行3D變換時
在Chromium基礎上的瀏覽器中，這個貌似是內核做了優(yōu)化个粱，當css動畫知識改變transfrom和opacity時古毛，整個CSS動畫得以在compositor thread完成（而JS動畫則會在main thread執(zhí)行),這樣css動畫渲染不會影響主線程。
回歸到日常開發(fā)中几蜻，當有一個動畫的需求時喇潘，首要考慮的肯定是能不能盡可能實現(xiàn)的問題体斩。如果在CSS動畫和JS動畫都能實現(xiàn)的基礎上才會要去根據(jù)上面總結的權衡哪個性能更好的問題梭稚。
注：在最新的瀏覽器進行運行測試時會發(fā)現(xiàn)，其實兩者的加載速度差別很小絮吵，所以具體的選擇需要看具體的需求和業(yè)務來進行選擇
