前端最佳化之動畫為什麼要盡量用css3代替js

標籤：原則   主線程   需求   瀏覽器   元素   包括   position   視覺   加速   

導致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