一、使用css， jq uery，canvas 制作 动画
1.Canvas
优点：性能好，强大，支持多数浏览器（除了IE6、IE7、IE8），画出来的图形可以直接保存为 .png 或者 . jpg 的图形；
缺点：依赖于HT ML ，只能通过脚本 绘制 图形，没有实现动画的API（依靠事件和定时器更新）；由于在 canvas 上以 编程方式 显示的文本其实就是位图，因此搜索爬行器将完全忽略文本。文本内容也无法被屏幕 阅读器 识别。
2.css3
优点： 简单 且与内容分离、css动画不触发layout和p ai nt；（这些属性的修改不会触发layout和paint：backface-visibil IT y、opacity、 PE rspective、perspective-ori gin 、transform）；
缺点：有浏览器兼容性问题、 安卓 手 机会 出现卡顿、受排版引擎的限制，与整个页面的dom结构息息相关。
3.JQuery
优点：没有兼容性问题
缺点：每一帧，都要进行repaint、recomposite（非常耗时）；
总结：在移动端动画效果上，使用css3动画要比jquery动画效率高的多。在安卓手机上表现尤其明显！所以移动端动画以css3动画为优先，jquery只能用来简单处理应用逻辑。css3动画是用来给内容布局加上特效的通用解决 方案 ，但是在性能堪忧的移动浏览器上很可能会受排版性能所限，达不到 理想 的效果。而对性能有要求的特定场景，比如游戏，用canvas会有很大的 提高 。
二、css3在移动端出现卡顿问题
css3制作的动画在ios上跑的66的，但是在安卓上有时会出现卡顿现象。不妨从下面几点找找问题。
a、 是否 导致layout
如果是，尽可能将动画元素absolute或者fixed化以避免影响文档树，以减少 重排 .
b、是否启用 硬件 加速
[用到了CSS3动画]和[开启了硬件加速]是两件事情，虽然前者有可能导致后者。
开启硬件加速在 webkit 中有神奇的万金油：opacity: 1;或者-webkit-backface-visibility: hidden;。
c、是否是有高消耗的属性（css shadow、gra die nts、background-attachment: fixed等）
有的话，图片也是一种选择。这算得上是用空间换时间的优化了。
d、repaint的 面积
如果是，只好缩小动画面积了。这一步的优化有限;
e、尽量使用 transform 生成动画，避免使用 h ei ght,width,m arg in,padding 等；如以下例子1和例子2。
PS：使用 transform，浏览器只需要一次生成这个元素的位图，并在动画 开始 的时候将它提交给 GPU 去处理 。之后，浏览器不需要再做任何布局、 绘制以及提交位图的操作。从而，浏览器可以充分 利用 GPU 的特长去快速地将位图绘制在不同的位置、执行旋转或缩放处理。简而言之，transform 动画由GPU控制，支持硬件加速，并不需要软件方面的渲染
三、动画过程有闪烁 （一 般出现在动画开始）
解决方法：
@H_ 304 _59@
.c ub e {
-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 PR operties here */
}
在webkit内核的浏览器中，另一个行之有效的方法是
.cube {
-webkit -t ransform: 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 */
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 css3针对移动端卡顿问题的解决(动画性能优化) 全部内容，希望文章能够帮你解决 css3针对移动端卡顿问题的解决(动画性能优化) 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于css3针对移动端卡顿问题的解决(动画性能优化)的详细内容...