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 相关文章推荐
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 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
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
详解JavaScript函数
2015/12/01 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
实例解析Python中的__new__特殊方法
2016/06/02 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
Django models.py应用实现过程详解
2019/07/29 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
物业管理应届生求职信
2013/10/28 职场文书
毕业生求职推荐信
2013/11/04 职场文书
三人合伙协议书范本
2014/10/29 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
困难补助申请报告
2015/05/19 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL
java设计模式--三种工厂模式详解
2021/07/21 Java/Android