導致JavaScript效率低的兩大原因：操作DOM和使用頁面動畫。通常我們會通過頻繁的操作 DOM的CSS來實現視覺上的動畫效果，導致js效率低的兩個因素都包括在內了在頻繁的操作DOM和CSS時，瀏覽器會不停的執行重排和重繪，在PC版本的瀏覽器中，因為瀏覽器可用的內存比較大，用戶肉眼幾乎看不見頁面動畫產生的repaint和reflow，所以工程師幾乎無需過多的考慮動畫帶來的性能問題，但在移動設備上可大有不同，移動設備分配給內置瀏覽器的內存可沒有PC版本的瀏覽器內存可觀，目前對CSS3支持最好的莫過於webkit瀏覽器了，在webkit內核的瀏覽器，莫過於safari其次是chrome.

用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語言編寫的，它是系統層面的動畫

CSS3動畫與javascript模擬動畫有以下區別：

1. CSS 3D動畫在js中無法實現

CSS3的3D動畫是CSS3中非常強大的功能，因為它的工作原理是在一個三維的空間裏，因此js是無法模擬出像CSS3那樣的3D動畫

2. CSS 2D矩陣動畫效率高於js利用margin和left,top模擬的矩陣動畫

CSS3的2D動畫是指是2D矩陣Transform變化，js當然是不能做變形動畫的。就拿坐標動畫來說，使用CSS3的transform做translateXY動畫比js中的position left，position right快了近700mm!而且視覺上也比js動畫流暢很多。

3. CSS3其它常規動畫屬性的效率均低於js模擬的動畫

常規動畫屬性在這裏是指：height，width,opacity,border-width,color
每在頁面執行一次動畫時，都應該帶有至少兩個事件animationStart和animationEnd有的可能還需要 animationDuration，在手機上我們不推薦animationDuration，本來效率就已經非常低了，盡量不要在動畫執行期間還做其它的事件。用js模擬動畫，需要開發者編寫這些動畫事件的接口，以便更好的做下一步的工作，而CSS3動畫不需要開發者編寫這些事件接口，瀏覽器本身就已經提供了， 拿webkit內核的瀏覽器舉例，它提供了 webkitTransitionStart,webkitTransitionEnd,webkitAnimationStart,webkitAnimationDuration,webkitAnimationEnd 事件接口，開發者可以很方便的使用這些事件。

采用js動畫還是css3動畫，需要開發者根據不同的需求做出不同的抉擇，但應該遵循一個基本的原則是：如果你需要做2D動畫，請勿必使用CSS3的transition或animation

前端優化之動畫為什麽要盡量用css3代替js