css+动画优化,css3动画性能优化--针对移动端卡顿问题

一、使用css，jquery，canvas制作动画

1.Canvas

优点：性能好，强大，支持多数浏览器(除了IE6、IE7、IE8)，画出来的图形可以直接保存为 .png 或者 .jpg的图形；

缺点：依赖于HTML，只能通过脚本绘制图形，没有实现动画的API(依靠事件和定时器更新)；由于在 canvas 上以编程方式显示的文本其实就是位图，因此搜索爬行器将完全忽略文本。文本内容也无法被屏幕阅读器识别。

2.css3

优点：简单且与内容分离、css动画不触发layout和paint；(这些属性的修改不会触发layout和paint：backface-visibility、opacity、perspective、perspective-origin、transform)；

缺点：有浏览器兼容性问题、安卓手机会出现卡顿、受排版引擎的限制，与整个页面的dom结构息息相关。

3.JQuery

优点：没有兼容性问题

缺点：每一帧，都要进行repaint、recomposite(非常耗时)；

总结：在移动端动画效果上，使用css3动画要比jquery动画效率高的多。在安卓手机上表现尤其明显！所以移动端动画以css3动画为优先，jquery只能用来简单处理应用逻辑。css3动画是用来给内容布局加上特效的通用解决方案，但是在性能堪忧的移动浏览器上很可能会受排版性能所限，达不到理想的效果。而对性能有要求的特定场景，比如游戏，用canvas会有很大的提高。

二、css3在移动端出现卡顿问题