用CSS开启硬件加速来提升网站性能（转）

3D变换 会自动开启GPU加速

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

 

原生的移动端应用(Native mobile applications)老是能够很好的运用GPU，这是为何它比网页应用(Web apps)表现更好的缘由。硬件加速在移动端尤为有用，由于它能够有效的减小资源的利用(麦时注：移动端自己资源有限)。

 

原文地址:

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

 

使用硬件加速的注意事项
使用硬件加速并非十全十美的事情，好比：

内存。若是GPU加载了大量的纹理，那么很容易就会发生内容问题，这一点在移动端浏览器上尤其明显，因此，必定要牢记不要让页面的每一个元素都使用硬件加速。使用GPU渲染会影响字体的抗锯齿效果。这是由于GPU和CPU具备不一样的渲染机制。即便最终硬件加速中止了，文本仍是会在动画期间显示得很模糊。著做权归做者全部。商业转载请联系做者得到受权,非商业转载请注明出处。原文: https://www.w3cplus.com/css3/introduction-to-hardware-acceleration-css-animations.html © w3cplus.com