动画卡顿在移动web开发的过程中是会经常遇到的，解决这个问题，一般都会用到css3开启硬件加速。这个名字听起来很高大上，但是它做的事情很简单，就是通过GPU（Graphics Processing Unit）进行渲染，解放CPU。 　　

　　CSS的 animation、tranform、transition并不会自动开启GPU加速，而是通过浏览器的缓慢的软件渲染引擎来实现执行，那么我们怎么才能实现GPU加速呢，很多浏览器提供了某些触发该模式的规则。

　　比如使用 translate3d() rotate3d() scale3d()　这几个方法，我们就可以使用ＧＰＵ加速了。

　　但是呢，某些情况下，我们并不想要对元素应用３Ｄ变换的效果，却还想要实现ＧＰＵ加速，这是我们就可以使用简单的ＣＳＳ属性来“欺骗”浏览器了，　触发硬件加速。



transform: translateZ(0)


　　这个声明就是可以触发桌面端和移动端的GPU加速，这是一个非常有效的方式（包含所有的浏览器前缀）：

 



.cube {
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      /* Other transform properties here */
   }


　　

 

 

原理：

　　DOM树和CSS结合之后会形成渲染树，渲染树包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到GPU中形成渲染纹理。 GPU中transform不会触发repaint，这一点非常类似3D绘图功能，最后这些使用transform的图层都会由独立的合成器进程进行处理。

 

 

启用：

　　

如下几个css属性可以触发硬件加速：

  • transform
  • opacity
  • filter
  • will-change：哪一个属性即将发生变化，进而进行优化。

 

 

可以通过transform的3D属性强制开启GPU加速：



transform: translateZ(0);
  transform: rotateZ(360deg);


  • 不能让每个元素都启用硬件加速，这样会暂用很大的内存，使页面会有很强的卡顿感。
  • GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。