讓你的頁面動畫在移動設備上運行的更快一些，這是一個比較有趣的話題，也是當下移動互聯網前端工程師需要關注的問題。
我們都知道導致JavaScript效率低的兩大原因：操作DOM和使用頁面動畫。在瀏覽器上實現動畫效果可不比客戶端輕松，通常我們會通過頻繁的操作 DOM的CSS來實現視覺上的動畫效果，剛巧導致js效率低的兩個因素都包括在內了。在頻繁的操作DOM和CSS時，瀏覽器會不停的執行重排（reflow）和重繪（repaint）， 在PC版本的瀏覽器中，因為瀏覽器可用的內存比較大，用戶肉眼幾乎看不見頁面動畫產生的repaint和reflow，所以工程師幾乎(請注意，我是說幾乎)無需過多的考慮動畫帶來的性能問題，但在移動設備上可大有不同，移動設備分配給瀏覽器(指內置瀏覽器)的內存可沒有PC版本的瀏覽器內存可觀，據說 iPhone分配給safari的內存只有10M，但有位國外工程師測試過實際上iPhone 3GS分配給safari的內存僅有6M，而Android分配給瀏覽器的內存更加的不確定，不管是iPhone還是Android還是 windowPhone還是黑霉，都沒有官方的文檔說系統內置瀏覽器最多占用多少內存，所以以上說的內存數據都帶有不確定性。目前對CSS3支持最好的莫過於webkit瀏覽器了，在webkit內核的瀏覽器，莫過於Apple公司的safari其次是Google公司的chrome再次應該算是黑莓瀏覽器。
在繼續說下去之前，我們再把話題轉向CSS3。前端工程師們都知道CSS3提供了一大批新的特性，包括2D＼3D動畫特性，其它特性不在本篇討論范圍內，我們此刻討論一下CSS3的動畫特性。用CSS3動畫替代JS模擬動畫的好處：
1. 不占用JS主線程；
2. 可以利用硬件加速；
3. 瀏覽器可對動畫做優化（元素不可見時不動畫，減少對FPS的影響）。
壞處是：
瀏覽器對渲染的批量異步化處理讓動畫難以控制，此時可以用
1 $.fn.repaint = function () { 2 this.each(function (item) { 3 return item.clientHeight; 4 }); 5 }
來強制同步。
CSS3動畫提供了2D和3D以及常規動畫屬性接口，它可以工作在頁面的任何一個元素的任意一個屬性，CSS3的動畫是利用C語言編寫的，它是系統層面的動畫，因此它的效率絕對的高於js模擬的動畫，真的就是這樣嗎？
經過我們的測試發現CSS3動畫與javascript模擬動畫有以下區別：
1. CSS 3D動畫在js中無法實現
CSS3的3D動畫是CSS3中非常強大的功能，因為它的工作原理是在一個三維的空間里，因此js是無法模擬出像CSS3那樣的3D動畫，當然這個3D動畫的實際應用場景是否很廣，值得思考……
2. CSS 2D矩陣動畫效率高於js利用margin和left,top模擬的矩陣動畫
CSS3的2D動畫是指是2D矩陣Transform變化，比如縮放＼變形＼x軸＼y軸，js當然是不能做變形動畫的。就拿坐標動畫來說，經過我們的測試 發現使用CSS3的transform做translateXY動畫比js中的position left，position right快了近700mm!而且視覺上也比js動畫流暢很多。
3. CSS3其它常規動畫屬性的效率均低於js模擬的動畫
常規動畫屬性在這里是指：height，width,opacity,border-width,color…..
我們曾在Android HTC中測試將一個DOM元素從height:0改變為height:100，我們使用了jQuery animate和CSS3的transition以及animation，結果表明：CSS3的tansition和animation均慢於 jQuery animate 500mm！其它的常規動畫屬性均慢於jQuery animate 400-500mm!。
以上是我們就CSS3動畫和jQuery動畫做過的一些簡單的測試，我們希望您也能夠在評論中列出您的測試結果。下面我們再來看看動畫事件。
每在頁面執行一次動畫時，都應該帶有至少兩個事件animationStart和animationEnd有的可能還需要 animationDuration，在手機上我們不推薦animationDuration，本來效率就已經非常低了，盡量不要在動畫執行期間還做其它 的事件。用js模擬動畫，需要開發者編寫這些動畫事件的接口，以便更好的做下一步的工作，而CSS3動畫不需要開發者編寫這些事件接口，瀏覽器本身就已經提供了， 拿webkit內核的瀏覽器舉例，它提供了 webkitTransitionStart,webkitTransitionEnd,webkitAnimationStart,webkitAnimationDuration,webkitAnimationEnd 事件接口，開發者可以很方便的使用這些事件。
通過上面的討論我們可以發現一個結果：
至於采用js動畫還是css3動畫，需要開發者根據不同的需求做出不同的抉擇，但應該遵循一個基本的原則是：
如果你需要做2D動畫，請勿必使用CSS3的transition或animation。