你知道我們可以在瀏覽器中用css開啟硬件加速，使GPU (Graphics Processing Unit) 發(fā)揮功能，從而讓渲染的性能更好嗎窝撵？
現(xiàn)在大多數(shù)電腦的顯卡都支持硬件加速，因此，我們可以利用GPU的能力掩完，在基于CPU運(yùn)行的瀏覽器上，讓我們的網(wǎng)站或應(yīng)用的性能更好硼砰。
在這篇文章中且蓬，我們將會(huì)在桌面端和移動(dòng)端上使用CSS硬件加速。
在桌面端和移動(dòng)端用CSS開啟硬件加速
想知道如何讓CSS動(dòng)畫在瀏覽器上運(yùn)行的很流暢嗎题翰？
CSS的animations恶阴、transforms以及transitions不會(huì)自動(dòng)開啟GPU加速，而是由瀏覽器的緩慢的軟件渲染引擎來執(zhí)行豹障。那我們?cè)鯓硬趴梢郧袚Q到GPU模式呢冯事，很多瀏覽器提供了某些觸發(fā)該模式的CSS規(guī)則。
現(xiàn)在血公，像Chrome昵仅、FireFox、Safari累魔、 IE9+和最新版本的Opera都支持硬件加速摔笤，當(dāng)它們檢測到頁面中某個(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變換的效果，但是仍然想發(fā)揮GPU加速的優(yōu)勢梯投。這時(shí)候我們可以使用個(gè)簡單的CSS屬性來"欺騙"瀏覽器命辖，觸發(fā)硬件加速。
雖然我們可能不想對(duì)元素應(yīng)用3D變換分蓖，可我們一樣可以開啟3D引擎尔艇。非常的簡單，用transform: translateZ(0);這個(gè)聲明可以觸發(fā)桌面端和移動(dòng)端的GPU加速么鹤，這是一個(gè)非常有效的方式(包含了所有的瀏覽器前綴)
.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和Safari中终娃，當(dāng)我們使用CSStransforms或者animations時(shí)可能會(huì)出現(xiàn)頁面閃爍的效果，下面的代碼可以修復(fù)這個(gè)問題：
.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)用總是可以很好的運(yùn)用GPU尝抖，這就是為什么它比網(wǎng)頁應(yīng)用(Web apps)表現(xiàn)更好的原因。硬件加速在移動(dòng)端尤其有用迅皇，因?yàn)樗梢杂行У臏p少資源的利用昧辽。
總結(jié)
只對(duì)我們需要實(shí)現(xiàn)動(dòng)畫效果的元素應(yīng)用以上方法，這能夠提高2D渲染的性能登颓，如果僅僅為了開啟硬件加速而在任何元素上使用搅荞，那是不明智的。
如果你需要獲得最好的性能體驗(yàn)，小心的使用這些方法咕痛。過度的使用GPU可能會(huì)導(dǎo)致嚴(yán)重的性能問題痢甘，因?yàn)樗黾恿藘?nèi)存的使用––這將會(huì)減少移動(dòng)端設(shè)備的電池壽命。
你有在項(xiàng)目中使用過這些方法嗎茉贡？如果有塞栅，請(qǐng)分享你的精彩案例吧。
原文地址：http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
