css3针对移动端卡顿问题的解决(动画性能优化)


Posted in HTML / CSS onFebruary 14, 2020

一、使用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控制,支持硬件加速,并不需要软件方面的渲染

三、动画过程有闪烁(一般出现在动画开始)

解决方法:

.cube {

   -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 properties here */

}

在webkit内核的浏览器中,另一个行之有效的方法是

.cube {

   -webkit-transform: 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 */

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 #HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 #HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 #HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 #HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 #HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 #HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 #HTML / CSS
You might like
星际争霸任务指南——虫族
2020/03/04 星际争霸
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
JavaScript日历实现代码
2010/09/12 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
python中查看变量内存地址的方法
2015/05/05 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
编写strcpy函数
2014/06/24 面试题
机械专业应届生求职信
2013/12/12 职场文书
大学毕业感言50字
2014/02/07 职场文书
读书活动实施方案
2014/03/10 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
班主任高考寄语
2015/02/26 职场文书
同意落户证明
2015/06/19 职场文书
初中生物教学随笔
2015/08/15 职场文书
教师节主题班会方案
2015/08/17 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书