css硬件加速

你知道咱們能夠在瀏覽器中用css開啓硬件加速，使GPU (Graphics Processing Unit) 發揮功能，從而提高性能嗎？

如今大多數電腦的顯卡都支持硬件加速。鑑於此，咱們能夠發揮GPU的力量，從而使咱們的網站或應用表現的更爲流暢。

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

CSS animations, transforms 以及 transitions 不會自動開啓GPU加速，而是由瀏覽器的緩慢的軟件渲染引擎來執行。那咱們怎樣才能夠切換到GPU模式呢，不少瀏覽器提供了某些觸發的CSS規則。

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

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

總結

只對咱們須要實現動畫效果的元素應用以上方法，若是僅僅爲了開啓硬件加速而隨便亂用，那是不明智的。

當心使用這些方法，若是經過你的測試，結果確是提升了性能，你纔可使用這些方法。使用GPU可能會致使嚴重的性能問題，由於它增長了內存的使用，並且它會減小移動端設備的電池壽命。

 

出自：http://www.cnblogs.com/PeunZhang/p/3510083.html