GPU硬件加速原理 /轉

現代瀏覽器大均可以利用GPU來加速頁面渲染。每一個人都癡迷於60楨每秒的順滑動畫。在GPU的衆多特性之中，它能夠存儲必定數量的紋理（一個矩形的像素點集合）而且高效地操做這些紋理（好比進行特定的移動、縮放和旋轉操做）。這些特性在實現一個流暢的動畫時特別有用。瀏覽器不會在動畫的每一幀都繪製一次，而是生成DOM元素的快照，並做爲GPU紋理（也被叫作層）存儲起來。以後瀏覽器只須要告訴GPU去轉換指定的紋理來實現DOM元素的動畫效果。這就叫作GPU合成，也常常被稱這種藉助於顯卡的優點改變渲染操做：一般被籠統的稱爲「硬件加速(hardware acceleration)」。

「注」：fps:幀/秒(frames per second)的縮寫,也稱爲幀速率。是指1秒鐘時間裏刷新的圖片的幀數

 

GPU（Graphic Processing Unit，圖形處理器）。GPU是相對於CPU的一個概念，因爲在現代的計算機中圖形的處理變得愈來愈重要，須要一個專門的圖形的核心處理器。在瀏覽器中用css開啓硬件加速，使GPU發揮功能。CSS animations, transforms 以及 transitions 不會自動開啓GPU加速，而是由瀏覽器的緩慢的軟件渲染引擎來執行。那咱們怎樣才能夠切換到GPU模式呢，不少瀏覽器提供了某些觸發的CSS規則。如今，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，當它們檢測到頁面中某個DOM元素應用了某些CSS規則時就會開啓，最顯著的特徵的元素的3D變換。在一些不須要3D效果的時候須要一些技巧開啓硬件加速，例如：爲動畫DOM元素添加CSS3樣式-webkit-transform.:transition3d(0,0,0)或-webkit-transform.:translateZ(0);，這兩個屬性都會開啓GPU硬件加速模式，從而讓瀏覽器在渲染動畫時從CPU轉向GPU

 

.cube {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   /* Other transform properties here */
}

在webkit內核的瀏覽器中，另外一個行之有效的方法是

.cube {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

原生的移動端應用老是能夠很好的運用GPU，這是爲何它比網頁應用(Web apps)表現更好的緣由。硬件加速在移動端尤爲有用，由於它能夠有效的減小資源的利用。若是經過你的測試，結果確是提升了性能，你纔可使用這些方法。使用GPU可能會致使嚴重的性能問題，由於它增長了內存的使用，並且它會減小移動端設備的電池壽命。

硬件加速的工做原理：

瀏覽器接收到頁面文檔後，會將文檔中的標記語言解析爲DOM樹。DOM樹和CSS結合後造成瀏覽器構建頁面的渲染樹。渲染樹中包含了大量的渲染元素，每個渲染元素會被分到一個圖層中，每一個圖層又會被加載到GPU造成渲染紋理，而圖層在GPU中transform 是不會觸發 repaint 的，這一點很是相似3D繪圖功能，最終這些使用 transform 的圖層都會由獨立的合成器進程進行處理。

3D 和 2D transform 的區別就在於，瀏覽器在頁面渲染前爲3D動畫建立獨立的複合圖層，而在運行期間爲2D動畫建立。動畫開始時，生成新的複合圖層並加載爲GPU的紋理用於初始化 repaint。而後由GPU的複合器操縱整個動畫的執行。最後當動畫結束時，再次執行 repaint 操做刪除複合圖層。

 

使用 GPU 渲染元素，並非全部的CSS屬性都能觸發GPU的硬件加速，實際上只有少數屬性能夠，好比下面的這些：

• transform
• opacity
• filter

若是某一個元素的背後是一個複雜元素，那麼該元素的 repaint 操做就會耗費大量的資源，此時也可使用上面的技巧來減小性能開銷。

 

使用硬件加速的注意事項

使用硬件加速並非十全十美的事情，好比：

• 內存。若是GPU加載了大量的紋理，那麼很容易就會發生內容問題，這一點在移動端瀏覽器上尤其明顯，因此，必定要牢記不要讓頁面的每一個元素都使用硬件加速。
• 使用GPU渲染會影響字體的抗鋸齒效果。這是由於GPU和CPU具備不一樣的渲染機制。即便最終硬件加速中止了，文本仍是會在動畫期間顯示得很模糊。

層建立標準

什麼狀況下能使元素得到本身的層？雖然 Chrome 的啓發式方法(heuristic)隨着時間在不斷髮展進步，可是從目前來講，知足如下任意狀況便會建立層：

• 3D 或透視變換(perspective transform) CSS 屬性
• 使用加速視頻解碼的 元素
• 擁有 3D (WebGL) 上下文或加速的 2D 上下文的 元素
• 混合插件(如 Flash)
• 對本身的 opacity 作 CSS 動畫或使用一個動畫 webkit 變換的元素
• 擁有加速 CSS 過濾器的元素
• 元素有一個包含複合層的後代節點(換句話說，就是一個元素擁有一個子元素，該子元素在本身的層裏)
• 元素有一個 z-index 較低且包含一個複合層的兄弟元素(換句話說就是該元素在複合層上面渲染)

 

主要是最後一條,若是有一個元素，它的兄弟元素在複合層中渲染，而這個兄弟元素的z-index比較小，那麼這個元素（不論是不是應用了硬件加速樣式）也會被放到複合層中。

這類問題尤爲是用了輪播、動畫loading的頁面，出現這問題很常見。另外推薦在追查性能問題的時候打開『show composited layer borders』選項，若是頁面有不少黃色的框確定是不對的。最可怕的是，瀏覽器有可能給複合層以後的全部相對或絕對定位的元素都建立一個複合層來渲染。使用3D硬件加速提高動畫性能時，最好給元素增長一個z-index屬性，人爲干擾複合層的排序，能夠有效減小chrome建立沒必要要的複合層，提高渲染性能，移動端優化效果尤其明顯。

 

參考： 

http://www.w3cplus.com/css3/introduction-to-hardware-acceleration-css-animations.html

http://www.360doc.com/content/13/1218/10/10504424_338073233.shtml

http://blog.csdn.net/xiebaochun/article/details/50274963

http://www.html5rocks.com/zh/tutorials/speed/layers/