解決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如需轉載必須以鏈接形式注明原載或原文地址，謝謝合作