學習經過CSS硬件加速提高你網站的性能

知道咱們能夠經過卸載CSS圖形特性到GPU（圖形處理單元）來硬件加速CSS的圖形特性，以得到在瀏覽器中的更好渲染效果嗎？

現在大多數計算機都有適合顯卡的硬件加速功能。所以，咱們就能夠爲那些大功耗的利用GPU的能量，進而咱們的網站和應用能夠在CPU上的瀏覽器中運行得更快。

在這篇文章，咱們將 CSS 硬件加速應用在桌面和移動瀏覽器上。

在桌面和手機瀏覽器上的CSS硬件加速

有沒有想過一些 CSS 動畫怎麼如此順利運行在瀏覽器中?

CSS 動畫、 轉換和過渡並不會自動進行GPU 加速，取而代之從瀏覽器的較慢的渲染引擎執行。那麼怎麼精確地強制瀏覽器切換到 GPU 模式呢?許多瀏覽器都提供了經過某些 CSS 規則進行 GPU 加速。

目前，一些瀏覽器像Chrome、 火狐、 Safari、 IE9 + 和最新版本的歐鵬瀏覽器都配備了硬件加速功能；它們只是當有跡象代表一個DOM元素要使用它的時候纔會使用到。

例如：

1. .cube {
2. 　　-webkit-transform: translate3d(250px,250px,250px)
3. 　　rotate3d(250px,250px,250px,-120deg)
4. 　　scale3d(0.5, 0.5, 0.5);
5. 　　} 

 

在某些狀況下，您可能不但願 在元素上進行3D 轉換，可是仍然利用 GPU 加速。那時就可使用幾個簡單的 CSS 屬性，誘使瀏覽器觸發 GPU 加速。

即便咱們不在 3D 空間中建立動畫元素，咱們也能夠啓用 3D 渲染。至少，"transform:translateZ(0);"能夠宣稱觸發 GPU 加速在現代的桌面和移動瀏覽器中。這彷佛是最有效的觸發 GPU 加速的方法(包括全部的瀏覽器前綴)：

1. 　.cube {
2. 　　-webkit-transform: translateZ(0);
3. 　　-moz-transform: translateZ(0);
4. 　　-ms-transform: translateZ(0);
5. 　　-o-transform: translateZ(0);
6. 　　transform: translateZ(0);
7. 　　/* Other transform properties here */
8. 　　}

 

在 Chrome 和 Safari中， 當咱們使用 CSS 轉換或動畫可能會看到閃爍的效果。下面的聲明能夠用於解決此問題：　

1. 　.cube {
2. 　　-webkit-backface-visibility: hidden;
3. 　　-moz-backface-visibility: hidden;
4. 　　-ms-backface-visibility: hidden;
5. 　　backface-visibility: hidden;
6. 　　-webkit-perspective: 1000;
7. 　　-moz-perspective: 1000;
8. 　　-ms-perspective: 1000;
9. 　　perspective: 1000;
10. 　　/* Other transform properties here */
11. 　　}

 

 另一種彷佛能夠解決Webkit引擎的桌面和移動瀏覽器問題的方式是使用translate3d：

1. 　　.cube {
2. 　　-webkit-transform: translate3d(0, 0, 0);
3. 　　-moz-transform: translate3d(0, 0, 0);
4. 　　-ms-transform: translate3d(0, 0, 0);
5. 　　transform: translate3d(0, 0, 0);
6. 　　/* Other transform properties here */
7. 　　}

 

 本地移動應用程序也能利用設備的GPU加速——這就是爲何人們都知道它們表現的比Web應用程序更好。使用硬件加速在移動設備上尤爲有用，這是由於它能夠有效減小設備上的資源消耗。

總結：

咱們所涉及的方法應僅用於咱們正在進行動畫處理的元素。它們能夠提高在2D動畫上的表現，可是僅僅爲了硬件加速而把它們應用在全部的上面是不明智的。

當心地使用它們的每一種方式，而且只在須要體驗真正的表現性能的時候。沒必要要地使用 GPU 能夠致使重大的性能問題，由於它增長了內存的使用 — — — — 它也會影響在移動設備上的電池壽命。

你有沒有試過在項目中使用這些方法呢？若是有試過，請你們分享一下哪個是最有效和表現最好的。

原文連接：http://www.gbtags.com/gb/share/10089.htm