html5移动端动画卡顿优化

前言

 

  针对在移动设备执行HTML动画卡顿及缓慢，严重影响视觉及体验，很大一部分是在执行动画过程中一直渲染repaint（一直触发），减少触发改善流畅度。

 

造成卡顿原因

   执行一个动画，采取Left ,Top(x, y)理解成坐标，一个物体从A ----------->B  通过Left,Top 来指定物体的位置，通过chrome Developer Tools 查看Layers，动画画布一直在渲染。

每一次动画执行中，paint count数量不断增加（画布在渲染），在是用 （left,top定位执行动画）也会造成移动端卡顿及缓慢。

 

解决方案

1、使用css3    transform 中的 translate() 来替代 top 和 left

     

观察，paint count 不会在动画执行中，触发Paint count,只有在最后一次会触发下。

 

2、jquery  animate 中的Left,Top优化

  A、 涉及Left , Top都会有这样的问题，使用chrome developer tools layers会发现跟跟上边同样问题，

     jQuery 不支持transform ，可以使用step,在回调中处理用css中使用transform.(了解) 

 B、Velocity.js是一款动画切换的jQuery插件，它重新实现了jQuery的$.animate()方法从而加快动画切换的速度，

      Velocity.js在内部实现中使用了jQuery的$.queue()方法，因此它比 jQuery的$.animate()、$.fade()、$.delay()方法更加流畅，

       其性能也高于CSS的animation属性（主推） 

 

   英文官网地址

   中文地址

 

3、开启硬件加速

  A、 客户端开启硬件加速

  B、使用 transform:transition3d(0,0,0)或transform:translateZ(0);其实是为了渲染3D样式，但我们设置值为0后，并没有真正使用3D效果，但浏览器却因此开启了GPU硬件加速模式。

 

4、图片实现预加载为动画做准备。

 

总结

 使用css3代替传统left,top来实现动画，开启硬件加速模式