如何解決安卓（系統版本低） CSS3 動畫問題---高效能動畫

標籤：

目前對提升移動端CSS3動畫體驗的主要方法有幾點：

儘可能多的利用硬體能力，如使用3D變形來開啟GPU加速

-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);  

如動畫過程有閃爍（通常發生在動畫開始的時候），可以嘗試下面的Hack：

-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;-webkit-perspective: 1000;-moz-perspective: 1000;-ms-perspective: 1000;perspective: 1000;  

如下面一個元素通過translate3d右移500px的動畫流暢度會明顯優於使用left屬性：

#ball-1 {  transition: -webkit-transform .5s ease;  -webkit-transform: translate3d(0, 0, 0);}#ball-1.slidein {  -webkit-transform: translate3d(500px, 0, 0);}#ball-2 {  transition: left .5s ease;  left: 0;}#ball-2.slidein {  left: 500px;}

註：3D變形會消耗更多的記憶體與功耗，應確實有效能問題時才去使用它，兼在權衡

儘可能少的使用 box-shadows與 gradients

box-shadows與gradients往往都是頁面的效能殺手，尤其是在一個元素同時都使用了它們，所以擁抱扁平化設計吧。

儘可能的讓動畫元素不在文檔流中，以減少重排

position: fixed;  position: absolute;  

最佳化 DOM layout 效能

我們從執行個體開始描述這個主題：

var newWidth = aDiv.offsetWidth + 10;  aDiv.style.width = newWidth + ‘px‘;  var newHeight = aDiv.offsetHeight + 10;  aDiv.style.height = newHeight + ‘px‘;var newWidth = aDiv.offsetWidth + 10;  var newHeight = aDiv.offsetHeight + 10;  aDiv.style.width = newWidth + ‘px‘;  aDiv.style.height = newHeight + ‘px‘;  

這是兩段能力上完全等同的代碼，顯式的差異正如我們所見，只有執行順序的區別。但真是如此嗎？下面是加了說明注釋的代碼版本，很好的闡述了其中的進一步差異：

// 觸發兩次 layoutvar newWidth = aDiv.offsetWidth + 10;   // Read  aDiv.style.width = newWidth + ‘px‘;     // Write  var newHeight = aDiv.offsetHeight + 10; // Read  aDiv.style.height = newHeight + ‘px‘;   // Write// 只觸發一次 layoutvar newWidth = aDiv.offsetWidth + 10;   // Read  var newHeight = aDiv.offsetHeight + 10; // Read  aDiv.style.width = newWidth + ‘px‘;     // Write  aDiv.style.height = newHeight + ‘px‘;   // Write  

從注釋中可找到規律，連續的讀取offsetWidth/Height屬性與連續的設定width/height屬性，相比分別讀取設定單個屬性可少觸發一次layout。

從結論看似乎與執行隊列有關，沒錯，這是瀏覽器的最佳化策略。所有可觸發layout的操作都會被暫時放入 layout-queue 中，等到必須更新的時候，再計算整個隊列中所有操作影響的結果，如此就可只進行一次的layout，從而提升效能。

關鍵一，可觸發layout的操作，哪些操作下會layout的更新（也稱為reflow或者relayout）？

如何解決安卓（系統版本低） CSS3 動畫問題---高效能動畫