用CSS開啟硬體加速來提高網站性能

國外一篇文章，有點意思，轉載過來，準備嘗試下~

你知道我們可以在浏覽器中用css開啟硬體加速，使gpu (graphics processing unit) 發揮功能，進而提升性能嗎？

現在大多數電腦的顯示卡都支援硬體加速。鑒于此，我們可以發揮gpu的力量，進而使我們的網站或應用表現的更為流暢。

css animations, transforms 以及 transitions 不會自動開啟gpu加速，而是由浏覽器的緩慢的軟體渲染引擎來執行。那我們怎樣才可以切換到gpu模式呢，很多浏覽器提供了某些觸發的css規則。

現在，像chrome, firefox, safari, ie9+和最新版本的opera都支援硬體加速，當它們檢測到頁面中某個dom元素應用了某些css規則時就會開啟，最顯著的特征的元素的3d變換。

例如：

可是在一些情況下，我們并不需要對元素應用3d變換的效果，那怎麼辦呢？這時候我們可以使用個小技巧“欺騙”浏覽器來開啟硬體加速。

雖然我們可能不想對元素應用3d變換，可我們一樣可以開啟3d引擎。例如我們可以用transform: translatez(0); 來開啟硬體加速 。

在 chrome and safari中，當我們使用css transforms 或者 animations時可能會有頁面閃爍的效果，下面的代碼可以修複此情況：

在webkit核心的浏覽器中，另一個行之有效的方法是

原生的移動端應用(native mobile applications)總是可以很好的運用gpu，這是為什麼它比網頁應用(web apps)表現更好的原因。硬體加速在移動端尤其有用，因為它可以有效的減少資源的利用(麥時注：移動端本身資源有限)。

隻對我們需要實作動畫效果的元素應用以上方法，如果僅僅為了開啟硬體加速而随便亂用，那是不明智的。

小心使用這些方法，如果通過你的測試，結果确是提高了性能，你才可以使用這些方法。使用gpu可能會導緻嚴重的性能問題，因為它增加了記憶體的使用，而且它會減少移動端裝置的電池壽命。

你有在項目中使用過這些方法嗎？如果有，請分享你的精彩案例吧。

作者：白樹