在案頭端和移動端用CSS開啟硬體加速執行個體代碼

來源:互聯網
上載者:User

你知道我們可以在瀏覽器中用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 */}

需要學習CSS的同學請關注php中文網CSS視頻教程,眾多css線上視頻教程可以免費觀看!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.