用CSS開啓硬件加速來提升網站性能（轉）

3D變換 會自動開啓GPU加速

.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)表現更好的緣由。硬件加速在移動端尤爲有用，由於它能夠有效的減小資源的利用(麥時注：移動端自己資源有限)。

 

原文地址:

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

 

使用硬件加速的注意事項
使用硬件加速並非十全十美的事情，好比：

內存。若是GPU加載了大量的紋理，那麼很容易就會發生內容問題，這一點在移動端瀏覽器上尤其明顯，因此，必定要牢記不要讓頁面的每一個元素都使用硬件加速。使用GPU渲染會影響字體的抗鋸齒效果。這是由於GPU和CPU具備不一樣的渲染機制。即便最終硬件加速中止了，文本仍是會在動畫期間顯示得很模糊。著做權歸做者全部。商業轉載請聯繫做者得到受權,非商業轉載請註明出處。原文: https://www.w3cplus.com/css3/introduction-to-hardware-acceleration-css-animations.html © w3cplus.com