css实现动画性能优化
一、使用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在移动端出现卡顿问题
css3制作的动画在ios上跑的66的,但是在安卓上有时会出现卡顿现象。不妨从下面几点找找问题。
a、是否导致layout
如果是,尽可能将动画元素absolute或者fixed化以避免影响文档树,以减少重排.
b、是否启用硬件加速
“用到了CSS3动画”和“开启了硬件加速”是两件事情,虽然前者有可能导致后者。
开启硬件加速在webkit中有神奇的万金油:opacity: 1;或者-webkit-backface-visibility: hidden;。
c、是否是有高消耗的属性(css shadow、gradients、background-attachment: fixed等)
有的话,图片也是一种选择。这算得上是用空间换时间的优化了。
d、repaint的面积
如果是,只好缩小动画面积了。这一步的优化有限;
e、尽量使用 transform 生成动画,避免使用 height,width,margin,padding 等;如以下例子1和例子2。
PS:使用 transform,浏览器只需要一次生成这个元素的位图,并在动画开始的时候将它提交给 GPU 去处理 。之后,浏览器不需要再做任何布局、 绘制以及提交位图的操作。从而,浏览器可以充分利用 GPU 的特长去快速地将位图绘制在不同的位置、执行旋转或缩放处理。简而言之,transform 动画由GPU控制,支持硬件加速,并不需要软件方面的渲染
纵横数据新上的美国站群服务器8C 现货
限量特价 速定! cn2限量一人3台
E5 16G 1T 8C 232IP
E5*2 32G 1T 8C 232IP
E5*2 32G 2T 8C 232IP
E5*2 32G 3T 8C 232IP
美国站群服务器 美国高防御服务器 欢迎在线客服 QQ 4001886560 482986990