css3動畫的性能優化

目前對提高移動端CSS3動畫體驗的主要方法有幾點:
儘量多的利用硬件能力,如使用3D變形來開啓GPU加速html

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

 一個元素經過translate3d右移500px的動畫流暢度會明顯優於使用left屬性;

緣由是由於:

    CSS動畫屬性會觸發整個頁面的重排relayout、重繪repaint、重組recomposite
    Paint一般是其中最花費性能的,儘量避免使用觸發paint的CSS動畫屬性,這也是爲何咱們推薦在CSS動畫中使用webkit-transform: translateX(3em)的方案代替使用left: 3em,由於left會額外觸發layout與paint,而webkit-transform只觸發整個頁面composite(這也是爲何推薦在CSS動畫中使用webkit-transform: translateX(500px)的方案代替使用left: 500px);

web

如動畫過程有閃爍(一般發生在動畫開始的時候),能夠嘗試下面的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;

 儘量少的使用box-shadows與gradients動畫

box-shadows與gradients每每都是頁面的性能殺手,尤爲是在一個元素同時都使用了它們.spa

儘量的讓動畫元素不在文檔流中,以減小重排3d

position: fixed;
position: absolute;

 性能消耗圖orm

性能消耗圖,因而可知最受歡飲和性能最好的莫過於transform和opacity了。htm

其實呢,opacity和transform能解決的問題已經不少了,儘可能少的使用其餘的屬性去進行動畫製做吧blog

相關文章
相關標籤/搜索