使用CSS3開啓GPU硬件加速提高網站動畫渲染性能

遇到的問題：

　　網站自己設計初衷就沒有打算支持IE8及如下版本瀏覽器，並非由於代碼兼容性問題，而是真的不想遷就那些懶得更新本身操做系統和瀏覽器的用戶，畢竟是我本身的網站，因此我說了算！哈哈~

　　沒有了低版本IE6瀏覽器，就不用顧慮他們的性能問題了，本覺得開發會一路順風，結果」性能問題」居然出如今了一直以性能出色著稱的Chrome瀏覽器中。

　　Chrome下的動畫比IE9和FF都要慢不少，一開始以爲是本身的js邏輯問題，由於要遍歷9個元素並計算他們的座標。後來嘗試了使用requestAnimationFrame、webWorker和canvas，但狀況仍然沒有任何好轉。經過chrome的DevTool中TimeLine監控，發現動畫的代碼邏輯並無佔用太多資源，反卻是painting消耗了大量的時間，平均才30fps左右。

 

上圖可見主要時間都浪費在painting上了，元素背景圖過大致使。

　　上面這幾張圖都是開啓GPU硬件加速以前使用Chrome DevTool Timeline功能中Frames模塊監測到的數據，明顯看到平均幀速率在30fps左右

　　其實，chrome對於渲染多張大尺寸圖片方面一直表現疲軟，以前在開發人人小站瀑布流佈局模板的時候就遇到過這類問題，chrome中只要存在大量縮放圖片，頁面滾動的時候就會極其卡頓，就像是用一臺2004年的電腦訪問一個2014年的網站同樣。chrome對於渲染不少大尺寸圖片(尤爲是alphy透明度PNG24圖片)方面有先天的不足，從它版本10+的時候就有開發者在官方平臺報過這個Bug，現在chrome已經更新至版本30+，卻依舊沒有完美解決這個頑疾。

解決Chrome動畫」卡頓」的辦法

　　爲動畫DOM元素添加CSS3樣式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，這兩個屬性都會開啓GPU硬件加速模式，從而讓瀏覽器在渲染動畫時從CPU轉向GPU，其實說白了這是一個小伎倆，也能夠算是一個Hack，-webkit-transform:transition3d和-webkit-transform:translateZ實際上是爲了渲染3D樣式，但咱們設置值爲0後，並無真正使用3D效果，但瀏覽器卻所以開啓了GPU硬件加速模式。

　　這種GPU硬件加速在當今PC機及移動設備上都已普及，在移動端的性能提高是至關顯著地，因此建議你們在作動畫時能夠嘗試一下開啓GPU硬件加速。

固然也能夠這樣開啓全部瀏覽器的GPU硬件加速：

webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

或

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

 

　　使用-webkit-transform:transition3d(0,0,0)開啓GPU硬件加速的chrome中渲染動畫性能明顯順暢了許多，平均能達到55fps左右。無圖無真相：

開啓GPU硬件加速先後幀速率對比圖(點擊查看清晰大圖)

chrome詭異的Bug

　　對全部動畫DOM元素添加-webkit-transform:transition3d(0,0,0)開啓GPU硬件加速以後，又出現了一個chrome詭異的Bug，當你有多個position:absolute;元素添加-webkit-transform:transition3d(0,0,0);開啓GPU硬件加速以後，會有幾個元素憑空消失，調試許久無果遂Google之，國內暫時沒有人發表過關於這類問題的文章，因而在國外網站找呀找，找到了不少與我遇到一樣問題的人，但都沒有真正靠譜的解決辦法，這多是跟添加-webkit-transform以後chrome嘗試使用GPU硬件加速有關係，最後仍是要等待Chrome官方更新解決了，當前Chrome版本是33。若是誰發現比較好的解決辦法，歡迎提出^_^

其餘人遇到的相似問題：
3D CSS transform: translateZ causes elements to disappear in Chrome
Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

如何避免這個問題：

　　在使用-webkit-transform嘗試對不少DOM元素編寫3D動畫時，儘可能不要對這些元素及他們的父元素使用position:absolute/fixed。(其實這種狀況很難避免)
因此個人臨時解決辦法是，減小使用-webkit-transform:transition3d(0,0,0)的DOM元素數量，從9個減至6個便沒有元素消失的現象了。
PS：因爲測試環境有限，若是你們發如今你的瀏覽器還有這個Bug,麻煩留言告訴我，萬分感謝！

開啓GPU硬件加速可能觸發的問題：

經過-webkit-transform:transition3d/translateZ開啓GPU硬件加速以後，有些時候可能會致使瀏覽器頻繁閃爍或抖動，能夠嘗試如下辦法解決之：

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

如何監測動畫幀速率

推薦兩種實時監測網頁渲染幀速率的方法：

1.Chrome的DevTool中TimeLine的Frame模塊

2.地址欄輸入」chrome:flags」搜索」fps」，將」FPS計數器」開啓，瀏覽器重啓後右上角會實時顯示幀速率。

我會再過些天單獨寫一篇關於經過Frame模塊監測網站性能的教程，敬請留意^_^

經過-webkit-transform:transition3d/translateZ開啓GPU硬件加速的適用範圍：

• 使用不少大尺寸圖片(尤爲是PNG24圖)進行動畫的頁面。
• 頁面有不少大尺寸圖片而且進行了css縮放處理，頁面能夠滾動時。
• 使用background-size:cover設置大尺寸背景圖，而且頁面能夠滾動時。(詳見:https://coderwall.com/p/j5udlw)
• 編寫大量DOM元素進行CSS3動畫時(transition/transform/keyframes/absTop&Left)
• 使用不少PNG圖片拼接成CSS Sprite時

我能想到的暫時只有這五種狀況，歡迎你們補充。

總結：

　　經過開啓GPU硬件加速雖然能夠提高動畫渲染性能或解決一些棘手問題，但使用仍需謹慎，使用前必定要進行嚴謹的測試，不然它反而會大量佔用瀏覽網頁用戶的系統資源，尤爲是在移動端，肆無忌憚的開啓GPU硬件加速會致使大量消耗設備電量，下降電池壽命等問題。

您還能夠參考如下HTML5相關文章:
《人人網首頁拖拽上傳詳解(HTML5 Drag&Drop、FileReader API、formdata)》
《HTML5 Drag&Drop 拖拽、FileReader實例教程》
《關於HTML 5 canvas 的基礎教程》

 PS：http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html（感謝彬GO）