国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS進階篇--用CSS開啟硬件加速來提高網(wǎng)站性能

Yi_Zhi_Yu / 2619人閱讀

摘要：在桌面端和移動端用開啟硬件加速以及不會自動開啟加速，而是由瀏覽器的緩慢的軟件渲染引擎來執(zhí)行。例如我們可以用來開啟硬件加速。

中文地址：http://www.cnblogs.com/rubylouvre/p/3471490.html

原文地址：http://blog.teamtreehouse.com/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 */
}

原生的移動端應用(Native mobile applications)總是可以很好的運用GPU，這是為什么它比網(wǎng)頁應用(Web apps)表現(xiàn)更好的原因。硬件加速在移動端尤其有用，因為它可以有效的減少資源的利用(麥時注：移動端本身資源有限)。

總結(jié)

只對我們需要實現(xiàn)動畫效果的元素應用以上方法，如果僅僅為了開啟硬件加速而隨便亂用，那是不明智的。

小心使用這些方法，如果通過你的測試，結(jié)果確是提高了性能，你才可以使用這些方法。使用GPU可能會導致嚴重的性能問題，因為它增加了內(nèi)存的使用，而且它會減少移動端設備的電池壽命。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112262.html

相關(guān)文章

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

    摘要：用開啟硬件加速來提高網(wǎng)站性能轉(zhuǎn)翻譯文章，原文地址。在桌面端和移動端用開啟硬件加速以及不會自動開啟加速，而是由瀏覽器的緩慢的軟件渲染引擎來執(zhí)行。用CSS開啟硬件加速來提高網(wǎng)站性能（轉(zhuǎn)） 翻譯文章，原文地址：http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css。 你...

    mrli2016 評論0 收藏0

  • 前端性能優(yōu)化常用總結(jié)

    摘要：前言對于前端的性能話題，從來都沒有斷絕過。作為一個前端開發(fā)者，性能是我們關(guān)注的指標。前端發(fā)展以來，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來我會從三個方面就前端性能進行總結(jié)網(wǎng)絡方面操作及渲染方面數(shù)據(jù)方面。 前言 對于前端的性能話題，從來都沒有斷絕過。因為這個東西沒有最好，只有更好。而且往往也是業(yè)務的繁雜程度去決定優(yōu)化程度的。作為一個前端開發(fā)者，性能是我們關(guān)注的指標。它直接影響著我們...

    oliverhuang 評論0 收藏0

  • 前端性能優(yōu)化常用總結(jié)

    摘要：前言對于前端的性能話題，從來都沒有斷絕過。作為一個前端開發(fā)者，性能是我們關(guān)注的指標。前端發(fā)展以來，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來我會從三個方面就前端性能進行總結(jié)網(wǎng)絡方面操作及渲染方面數(shù)據(jù)方面。 前言 對于前端的性能話題，從來都沒有斷絕過。因為這個東西沒有最好，只有更好。而且往往也是業(yè)務的繁雜程度去決定優(yōu)化程度的。作為一個前端開發(fā)者，性能是我們關(guān)注的指標。它直接影響著我們...

    walterrwu 評論0 收藏0

  • 前端性能優(yōu)化常用總結(jié)

    摘要：前言對于前端的性能話題，從來都沒有斷絕過。作為一個前端開發(fā)者，性能是我們關(guān)注的指標。前端發(fā)展以來，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來我會從三個方面就前端性能進行總結(jié)網(wǎng)絡方面操作及渲染方面數(shù)據(jù)方面。 前言 對于前端的性能話題，從來都沒有斷絕過。因為這個東西沒有最好，只有更好。而且往往也是業(yè)務的繁雜程度去決定優(yōu)化程度的。作為一個前端開發(fā)者，性能是我們關(guān)注的指標。它直接影響著我們...

    luzhuqun 評論0 收藏0

發(fā)表評論

0條評論

Yi_Zhi_Yu

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<