移动端淡入淡出卡顿问题--触发GPU加速

今天跟一技术leader聊到移动端淡入淡出效果卡顿问题，这个以前还真没遇到，可能是开发的手机性能太好了。既然说到有这个问题，那肯定就是有了，解决办法也是有的。技术leader提到了GPU加速。那就顺藤摸瓜，查一查。

CSS里的动画效果默认都不会开启GPU加速，然而使用浏览器缓慢的软件渲染引擎来执行。而开启硬件加速则能使网站的动画表现更为流畅。

GPU加速这个名字听上去很神奇，但是触发方式却比想象的要简单。

在大多数浏览器中，如果识别到页面里使用了z轴旋转（translateZ），即使旋转角度为0，也会开启GPU加速，所以我们可以利用这一点，来对页面元素进行0度Z轴旋转来”欺骗”浏览器开启GPU加速。

.abc {-webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0);}

但是在实际操作中，却发现如果采用上述方式，元素进行transform或者animate的时候可能会有页面闪烁的情况。google了之后发现可以通过隐藏元素旋转的背面（backface-visibility），以及设置一定的视图查看距离（perspective）来解决。

在上面的样式中再加入：

.abc {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}

另外了解到CSS中以下属性（transition、CSS3 3D transforms、Canvas、WebGL、Video）也能用来触发GPU渲染。