Javscript 動畫（setTimeout、setInterval）
1.性能不佳仲墨，因為需要不斷獲取和修改Dom的布局勾缭，所以導(dǎo)致了大量頁面重排（repaint）
2.缺乏標準，不同的庫使用了不同的API目养，導(dǎo)致即使是簡單的動畫也有各不相同的實現(xiàn)方式俩由，調(diào)整起來比較耗時
3.帶寬消耗，相對豐富的動畫庫代碼量都很大癌蚁，結(jié)果就是增加了http請求的大小幻梯，降低了頁面的載入時間
CSS3動畫 （transition、animation）
優(yōu)勢：
1.通過優(yōu)化DOM操作努释，避免內(nèi)存消耗來減少卡頓
2.使用與 RAF（requestAnimationFrame） 類似的機制
3.強制使用硬件加速 （通過 GPU 來提高動畫性能）
總的來書碘梢，css 動畫相比與JS更輕量，性能更好伐蒂，更易于實現(xiàn)煞躬，同時也不必擔心缺乏標準和增加帶寬消耗的問題。
缺陷：
1.Transition 強制使用了 GPU 的硬件加速。導(dǎo)致瀏覽器一直處于高負荷運轉(zhuǎn)的狀態(tài)恩沛，這反而會讓動畫變的卡頓在扰。這在移動瀏覽器上更為嚴重。（當數(shù)據(jù)在瀏覽器的主線程和合成線程之間頻繁傳輸?shù)臅r候特別消耗性能雷客，故容易導(dǎo)致卡頓芒珠。某些 CSS 屬性，不會受到影響搅裙。）
2.IE 10以下的瀏覽器不支持 transition妓局。
3.transition 不能完全被 Javascript 控制（只能通過 Javascript 來觸發(fā) transition），因為瀏覽器不知道如何同時讓 Javascript 控制動畫又同時優(yōu)化動畫的性能。
4.不是所有屬性都能參與動畫、動畫緩動效果太少腋逆、無法完全控制動畫過程荣回。
html5 動畫（canvas、svg、webgl）
其中svg做為一種可縮放矢量圖形的實現(xiàn)是基于xml標簽定義的，它有專門的animate標簽來定義動畫。而為canvas或者webgl實現(xiàn)動畫則需要通過 requestAnimationFrame (簡稱 raf) 來定期刷新畫布穆桂。
RAF主要手段：
1.減少DOM樣式屬性查詢，DOM樣式屬性的查詢惠導(dǎo)致頁面重排融虽，從而消耗性能享完，通過將屬性保存在JS變量中就可以避免在動畫時去查詢，從而減少卡頓有额。
2.使用性能更好的 css transform替代改變絕對定位元素的定位屬性
3.在移動設(shè)備上使用 3d 硬件加速般又，最簡單辦法就是添加-webkit-transform:translateZ(0)，原因是移動端的顯卡有很強的圖形渲染能力巍佑，而每個應(yīng)用的 webview 內(nèi)存卻是極其有限的茴迁。
RAF 相比setTimeout、setInterval的優(yōu)勢：
1萤衰、requestAnimationFrame 會把每一幀中的所有DOM操作集中起來堕义，在一次重繪或回流中就完成，并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率脆栋，一般來說倦卖，這個頻率為每秒60幀。
2椿争、在隱藏或不可見的元素中怕膛，requestAnimationFrame將不會進行重繪或回流，這當然就意味著更少的的cpu丘薛，gpu和內(nèi)存使用量嘉竟。
**總的來說，requestAnimationFrame 是專門為實現(xiàn)高性能的幀動畫而設(shè)計的一個API洋侨。 **
