-webkit-transform:translate3d(0,0,0)觸發GPU加速，讓網頁動畫更流暢

標籤：圖片   term   超過   利用   進一步   let   hid   developer   white   

前段時間，依照美拍的視頻效果寫了一個效果類似的網頁版的動畫。

電腦上安裝了三種瀏覽器：IE、Chrome、Firefox。分別作了測試，結果顯示Chrome在這方面的渲染效果最差。常常出現卡頓現象。ff表現最好。

一直百思不得其解，尤其是之前使用canvas標籤做圖片濾鏡效果，chrome瀏覽器竟然顯示不了濾鏡效果。然而其它瀏覽器均能正常顯示，大Google你腫麼了...對渲染多張圖片和動畫效果表示放棄了麼...

昨天和高人聊天，說道這個情況，他說道了transform:translate3d(0,0,0)能夠觸發硬體加速。然後樓主今天就百度了一下這個CSS3提供的3D效果，果然這個屬性都會開啟GPU硬體加速模式。從而讓瀏覽器在渲染動畫時從CPU轉向GPU。

於是乎。樓主今天給檔案中加入了例如以下代碼：

<span style="white-space:pre"></span>transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;-webkit-perspective:1000;-moz-backface-visibility:hidden;-moz-perspective:1000;backface-visibility:hidden;perspective:1000;

然後利用Chrome的developer Tools 中的Timeline工具。檢測整個動畫執行效能參數。為了做到最好的對照效果，先測試了改進後的版本號碼，然後再測未改進版本號碼的，以防止因為緩衝來帶的影響。先測試改進版的頁面。圖片會緩衝，這樣子再測未改進版本號碼的，僅僅能說對未改進版本號碼的更有利，這種情況下進行對照。反而更能說明問題，哈哈。

改進版本號碼參數：

未改進參數：

未改進版本號碼的fps（每秒傳輸幀數。值越高畫面就越流暢）一半多的時間都是小於30fps，而改進後的動畫fps基本都超過60fps，樓主自己去圍觀動畫效果，也發現了明顯的改進。Chrome瀏覽器的不流暢效果得到極大的改進。當然對於整個效果。樓主CSS3與jQ動畫結合使用，jQ的動畫效果比不上CSS3。所以等樓主進一步改進，用強大的CSS3來完畢整個動畫效果。應該就會棒棒噠~

-webkit-transform:translate3d(0,0,0)觸發GPU加速，讓網頁動畫更流暢