目前對提升移動端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'; 這是兩段能力上完全等同的代碼，顯式的差異正如我們所見，只有執行順序的區別。但真是如此嗎？下面是加了說明注釋的代碼版本，很好的闡述了其中的進一步差異：
// 觸發兩次 layout var newWidth = aDiv.offsetWidth + 10; // Read aDiv.style.width = newWidth + 'px'; // Write var newHeight = aDiv.offsetHeight + 10; // Read aDiv.style.height = newHeight + 'px'; // Write // 只觸發一次 layout var 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）？