標(biāo)簽：CSS3
原文請(qǐng)點(diǎn)擊一下鏈接：
http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
1. 何為硬件加速
就是將瀏覽器的渲染過(guò)程交給GPU處理，而不是使用自帶的比較慢的渲染器。這樣就可以使得animation與transition更加順暢眉反。
2. 如何開(kāi)啟硬件加速
Chrome, FireFox, Safari, IE9+ 以及最新的 Opera都支持硬件加速，只要使用特定的CSS語(yǔ)句就可以開(kāi)啟硬件加速:
/**使用3d效果來(lái)開(kāi)啟硬件加速**/
.speed-up {
-webkit-transform: translate3d(250px,250px,250px)
rotate3d(250px,250px,250px,-120deg)
scale3d(0.5, 0.5, 0.5);
}
如果并不需要用到transform變換，僅僅是開(kāi)啟硬件加速叶堆，可以用下面的語(yǔ)句:
/**原理上還是使用3d效果來(lái)開(kāi)啟硬件加速**/
.speed-up{
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
對(duì)于safari以及chrome才菠，可能會(huì)在使用animation或者transition時(shí)出現(xiàn)閃爍的問(wèn)題哥攘，可以使用以下的解決方法:
-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;
/**webkit上也可以用以下語(yǔ)句 **/
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
3. 注意事項(xiàng)
硬件加速最好只用在animation或者transform上。不要濫用硬件加速痰腮，因?yàn)檫@樣會(huì)增加性能的消耗而芥，如果濫用反而會(huì)使動(dòng)畫(huà)變得更加卡，這樣就得不償失了膀值。
