解決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左右

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 的基礎教程》

留意更新

訂閱彬Go以查看HTML5最新資源、教程。

轉載聲明:
原載: 彬Go——關注前端開發 & Web UI設計
本文連接: http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html如需轉載必須以連接形式註明原載或原文地址，謝謝合做