css硬件加速

你知道咱们能够在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提高性能吗？

如今大多数电脑的显卡都支持硬件加速。鉴于此，咱们能够发挥GPU的力量，从而使咱们的网站或应用表现的更为流畅。

在桌面端和移动端用CSS开启硬件加速

CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行。那咱们怎样才能够切换到GPU模式呢，不少浏览器提供了某些触发的CSS规则。

如今，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的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内核的浏览器中，另外一个行之有效的方法是

.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)表现更好的缘由。硬件加速在移动端尤为有用，由于它能够有效的减小资源的利用(麦时注：移动端自己资源有限)。

总结

只对咱们须要实现动画效果的元素应用以上方法，若是仅仅为了开启硬件加速而随便乱用，那是不明智的。

当心使用这些方法，若是经过你的测试，结果确是提升了性能，你才可使用这些方法。使用GPU可能会致使严重的性能问题，由于它增长了内存的使用，并且它会减小移动端设备的电池寿命。

 

出自：http://www.cnblogs.com/PeunZhang/p/3510083.html