學習通過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