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