Javscript 動畫（setTimeout、setInterval）
1.性能不佳，因為需要不斷獲取和修改Dom的布局，所以導致了大量頁面重排（repaint）
2.缺乏標準，不同的庫使用了不同的API，導致即使是簡單的動畫也有各不相同的實現方式，調整起來比較耗時
3.帶寬消耗，相對豐富的動畫庫代碼量都很大，結果就是增加了http請求的大小，降低了頁面的載入時間
CSS3動畫 （transition、animation）
優勢：
1.通過優化DOM操作，避免內存消耗來減少卡頓
2.使用與 RAF（requestAnimationFrame） 類似的機制
3.強制使用硬件加速 （通過 GPU 來提高動畫性能）
總的來書，css 動畫相比與JS更輕量，性能更好，更易于實現，同時也不必擔心缺乏標準和增加帶寬消耗的問題。
缺陷：
1.Transition 強制使用了 GPU 的硬件加速。導致瀏覽器一直處于高負荷運轉的狀態，這反而會讓動畫變的卡頓。這在移動瀏覽器上更為嚴重。（當數據在瀏覽器的主線程和合成線程之間頻繁傳輸的時候特別消耗性能，故容易導致卡頓。某些 CSS 屬性，不會受到影響。）
2.IE 10以下的瀏覽器不支持 transition。
3.transition 不能完全被 Javascript 控制（只能通過 Javascript 來觸發 transition），因為瀏覽器不知道如何同時讓 Javascript 控制動畫又同時優化動畫的性能。
4.不是所有屬性都能參與動畫、動畫緩動效果太少、無法完全控制動畫過程。
html5 動畫（canvas、svg、webgl）
其中svg做為一種可縮放矢量圖形的實現是基于xml標簽定義的，它有專門的animate標簽來定義動畫。而為canvas或者webgl實現動畫則需要通過 requestAnimationFrame (簡稱 raf) 來定期刷新畫布。
RAF主要手段：
1.減少DOM樣式屬性查詢，DOM樣式屬性的查詢惠導致頁面重排，從而消耗性能，通過將屬性保存在JS變量中就可以避免在動畫時去查詢，從而減少卡頓。
2.使用性能更好的 css transform替代改變絕對定位元素的定位屬性
3.在移動設備上使用 3d 硬件加速，最簡單辦法就是添加-webkit-transform:translateZ(0)，原因是移動端的顯卡有很強的圖形渲染能力，而每個應用的 webview 內存卻是極其有限的。
RAF 相比setTimeout、setInterval的優勢：
1、requestAnimationFrame 會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成，并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率，一般來說，這個頻率為每秒60幀。
2、在隱藏或不可見的元素中，requestAnimationFrame將不會進行重繪或回流，這當然就意味著更少的的cpu，gpu和內存使用量。
**總的來說，requestAnimationFrame 是專門為實現高性能的幀動畫而設計的一個API。 **
