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

對所有動畫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。如果誰發現比較好的解決辦法，歡迎提出^_^

其他人遇到的類似問題：

如何避免這個問題：

通過-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硬體加速的適用範圍：

通過開啟gpu硬體加速雖然可以提公升動畫渲染效能或解決一些棘手問題，但使用仍需謹慎，使用前一定要進行嚴謹的測試，否則它反而會大量占用瀏覽網頁使用者的系統資源，尤其是在移動端，肆無忌憚的開啟gpu硬體加速會導致大量消耗裝置電量，降低電池壽命等問題。

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

怎麼解決動畫卡頓

img載入卡頓，解決辦法

Chrome 下動畫卡頓問題的另一種可能

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

怎麼解決動畫卡頓

img載入卡頓，解決辦法

Chrome 下動畫卡頓問題的另一種可能

相關推薦