用CSS開啟硬件加速來提高網(wǎng)站性能（轉(zhuǎn)）

昵稱10504424 2013-12-18

展開全文

翻譯文章，原文地址：http://blog./increase-your-sites-performance-with-hardware-accelerated-css。

你知道我們可以在瀏覽器中用css開啟硬件加速，使GPU (Graphics Processing Unit) 發(fā)揮功能，從而提升性能嗎？

現(xiàn)在大多數(shù)電腦的顯卡都支持硬件加速。鑒于此，我們可以發(fā)揮GPU的力量，從而使我們的網(wǎng)站或應用表現(xiàn)的更為流暢。

在桌面端和移動端用CSS開啟硬件加速

CSS animations, transforms 以及 transitions 不會自動開啟GPU加速，而是由瀏覽器的緩慢的軟件渲染引擎來執(zhí)行。那我們怎樣才可以切換到GPU模式呢，很多瀏覽器提供了某些觸發(fā)的CSS規(guī)則。

現(xiàn)在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，當它們檢測到頁面中某個DOM元素應用了某些CSS規(guī)則時就會開啟，最顯著的特征的元素的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內(nèi)核的瀏覽器中，另一個行之有效的方法是

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