用CSS開啟硬件加速來(lái)提高網(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)站或應(yīng)用表現(xiàn)的更為流暢。

在桌面端和移動(dòng)端用CSS開啟硬件加速

CSS animations, transforms 以及 transitions 不會(huì)自動(dòng)開啟GPU加速，而是由瀏覽器的緩慢的軟件渲染引擎來(lái)執(zhí)行。那我們?cè)鯓硬趴梢郧袚Q到GPU模式呢，很多瀏覽器提供了某些觸發(fā)的CSS規(guī)則。

現(xiàn)在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，當(dāng)它們檢測(cè)到頁(yè)面中某個(gè)DOM元素應(yīng)用了某些CSS規(guī)則時(shí)就會(huì)開啟，最顯著的特征的元素的3D變換。

例如：

.cube {
-webkit-transform: translate3d(250px,250px,250px)
rotate3d(250px,250px,250px,-120deg)
scale3d(0.5, 0.5, 0.5);
}

可是在一些情況下，我們并不需要對(duì)元素應(yīng)用3D變換的效果，那怎么辦呢？這時(shí)候我們可以使用個(gè)小技巧“欺騙”瀏覽器來(lái)開啟硬件加速。

雖然我們可能不想對(duì)元素應(yīng)用3D變換，可我們一樣可以開啟3D引擎。例如我們可以用transform: translateZ(0); 來(lái)開啟硬件加速。

.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中，當(dāng)我們使用CSS transforms 或者 animations時(shí)可能會(huì)有頁(yè)面閃爍的效果，下面的代碼可以修復(fù)此情況：

.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)核的瀏覽器中，另一個(gè)行之有效的方法是

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

原生的移動(dòng)端應(yīng)用(Native mobile applications)總是可以很好的運(yùn)用GPU，這是為什么它比網(wǎng)頁(yè)應(yīng)用(Web apps)表現(xiàn)更好的原因。硬件加速在移動(dòng)端尤其有用，因?yàn)樗梢杂行У臏p少資源的利用(麥時(shí)注：移動(dòng)端本身資源有限)。

總結(jié)

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

小心使用這些方法，如果通過(guò)你的測(cè)試，結(jié)果確是提高了性能，你才可以使用這些方法。使用GPU可能會(huì)導(dǎo)致嚴(yán)重的性能問(wèn)題，因?yàn)樗黾恿藘?nèi)存的使用，而且它會(huì)減少移動(dòng)端設(shè)備的電池壽命。

你有在項(xiàng)目中使用過(guò)這些方法嗎？如果有，請(qǐng)分享你的精彩案例吧。

如果您覺(jué)得這文章對(duì)您有幫助，可以打賞點(diǎn)錢給我，鼓勵(lì)我繼續(xù)寫博，我的支付寶

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：昵稱10504424 > 《工作》

舉報(bào)/認(rèn)領(lǐng)