使用css來開啓硬件加速來提升網站性能

1、什麼是硬件加速

硬件加速就是將瀏覽器的渲染過程交給GPU處理，而不是使用自帶的比較慢的渲染器，這樣就可使得animation與transition更加順暢。咱們能夠在瀏覽器中用css開啓硬件加速，使GPU (Graphics Processing Unit) 發揮功能，從而提高性能。

 

2、硬件加速的原理

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

CSS transform 會建立了一個新的複合圖層，能夠被GPU直接用來執行 transform 操做。

瀏覽器何時會建立一個獨立的複合圖層呢？事實上通常是在如下幾種狀況下：

• 3D 或者 CSS transform
• <video> 和 <canvas> 標籤
• CSS filters
• 元素覆蓋時，好比使用了 z-index 屬性

 

3、爲何硬件加速會使頁面流暢

由於 transform 屬性不會觸發瀏覽器的 repaint（重繪），而絕對定位absolute中的 left 和 top 則會一直觸發 repaint（重繪）。爲何 transform 沒有觸發 repaint 呢？簡而言之，transform 動畫由GPU控制，支持硬件加速，並不須要軟件方面的渲染。

 

4、哪些css屬性能夠觸發GPU的硬件加速

transform，opacity，filter

 

5、如何在桌面端和移動端用css開啓硬件加速

SS animations, transforms 以及 transitions 不會自動開啓GPU加速，而是由瀏覽器的緩慢的軟件渲染引擎來執行。那咱們怎樣才能夠切換到GPU模式呢，不少瀏覽器提供了某些觸發的CSS規則。

如今，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，當它們檢測到頁面中某個DOM元素應用了某些CSS規則時就會開啓，最顯著的特徵的元素的3D變換。

例如：

.cube {

   -webkit-transform: translate3d(250px,250px,250px)

   rotate3d(250px,250px,250px,-120deg)

   scale3d(0.5, 0.5, 0.5);

}

但是在一些狀況下，咱們並不須要對元素應用3D變換的效果，那怎麼辦呢？這時候咱們可使用個小技巧「欺騙」瀏覽器來開啓硬件加速。

雖然咱們可能不想對元素應用3D變換，可咱們同樣能夠開啓3D引擎。例如咱們能夠用transform: translateZ(0); 來開啓硬件加速 。

.cube {

   -webkit-transform: translateZ(0);

   -moz-transform: translateZ(0);

   -ms-transform: translateZ(0);

   -o-transform: translateZ(0);

   transform: translateZ(0);

   /* Other transform properties here */

}

在 Chrome and Safari中，當咱們使用CSS transforms 或者 animations時可能會有頁面閃爍的效果，下面的代碼能夠修復此狀況：

.cube {

   -webkit-backface-visibility: hidden;

   -moz-backface-visibility: hidden;

   -ms-backface-visibility: hidden;

   backface-visibility: hidden;

   -webkit-perspective: 1000;

   -moz-perspective: 1000;

   -ms-perspective: 1000;

   perspective: 1000;

   /* 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 */

}

原生的移動端應用(Native mobile applications)老是能夠很好的運用GPU，這是爲何它比網頁應用(Web apps)表現更好的緣由。硬件加速在移動端尤爲有用，由於它能夠有效的減小資源的利用(移動端自己資源有限)。

 

6、使用硬件加速的問題與解決方法

1.使用GPU渲染會影響字體的抗鋸齒效果。這是由於GPU和CPU具備不一樣的渲染機制。即便最終硬件加速中止了，文本仍是會在動畫期間顯示得很模糊。

2.使用GPU可能會致使嚴重的性能問題，由於它增長了內存的使用，並且它會減小移動端設備的電池壽命。若是GPU加載了大量的紋理，那麼很容易就會發生內容問題，這一點在移動端瀏覽器上尤其明顯，因此，必定要牢記不要讓頁面的每一個元素都使用硬件加速。

舉個例子：

頁面中頭部的輪播動畫元素的存在竟然會致使下面全部相對和絕對定位的元素都被放到複合層中。。。

跳坑方法：

使用3D硬件加速提高動畫性能時，最好給元素增長一個z-index屬性，人爲干擾複合層的排序，能夠有效減小chrome建立沒必要要的複合層，提高渲染性能，移動端優化效果尤其明顯。

.isaax{
  position: relative;
  z-index: 1;  // 能夠設大點，儘可能設得比後面元素的z-index值高
}

 

該博文轉自：

http://www.cnblogs.com/ranyonsue/p/8296983.html