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实现3D旋转书本效果
Mar 21 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 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数据库操作方法(MYSQL版)
2011/06/08 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
PHP中使用curl入门教程
2015/07/02 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
Python进阶篇之字典操作总结
2016/11/16 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
Python callable()函数用法实例分析
2018/03/17 Python
python+opencv实现阈值分割
2018/12/26 Python
logging level级别介绍
2020/02/21 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
生产车间班组长岗位职责
2014/01/06 职场文书
出生医学证明书
2014/09/15 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
会计工作总结范文2014
2014/12/23 职场文书
爱心捐款感谢信
2015/01/20 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
2015年老干部工作总结
2015/04/23 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js
Python中的 enumerate和zip详情
2022/05/30 Python