css+动画优化,css3动画性能优化--针对移动端卡顿问题

一、使用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 */

}

css3动画的性能优化_针对移动端卡顿问题

这篇文章主要讲的是怎样制作流畅动画,特别是针对移动端.在这里我首先介绍制作动画的几种方法的优缺点:接着会着重介绍用css3制作动画的注意事项. 资源网站大全 https://55wd.com 设计导航 ...

WEB 移动端 CSS3动画性能 优化

很多时候,我们在开发移动端的时候要使自己的网页兼容不同的机型,很多时候会采用CSS3动画,但是很多时候在安卓机下,动画明显会出现卡顿,很难看,那么这里我介绍几个CSS 属性进行硬件加速那么就会得到明显 ...

iOS之tableView性能优化／tableView滑动卡顿？

本文围绕以下几点展开tableView性能优化的论述? 1.UITableViewCell重用机制? 2.tableView滑动为什么会卡顿? 3.优化方法? 4.总结 1.UITableViewCe ...

css3动画性能优化

css3的动画简单好用,但是性能方面存在一些问题,很多时候一不留神cpu就已经满了. 现在记下一些常用的技巧,去优化我们的css3的动画. 1. translate3d进行gpu加速 写动画的时候写个 ...

myslide 插件开发知识点总结和 css3 动画性能问题的研究

myslide 插件开发知识点总结和 css3 动画性能问题的研究 这篇文章主要是总结最近开发过程中遇到的问题.有几个问题又是不容易发现原因的问题,但是最后的结果又是很简单的. 1.手机端的 slid ...

动画性能优化－requestAnimationFrame、GPU等

最近在做一个场景动画,有一个欢迎界面和一个主动画界面,两个界面之间的连接通过一个进度条来完成,当进度条完成,提供通往主动画的按钮. 画面会从一个个的场景移动过去,用户可通过点击抽奖.查看气泡商铺等进行 ...

关于CSS3动画性能

前天我去面试了...好吧,对于自己6年6份工作的悲催经历,我自己也是醉了. 但没办法,我这种当时上学没好好学习,临毕业才出家写代码的半吊子码农,起步没起好,以至于一直没能找到真正让自己满意的工作. 通 ...

性能优化九之UI卡顿分析

在前一篇博客中提到内存抖动和耗时复杂的计算会导致UI卡顿. 那为什么内存抖动会导致UI卡顿呢? 其实在 性能优化一之内存与垃圾回收器 这篇文章中已经有所提及. 这里来详细说明一下: 渲染功能是应用程序 ...

360：且用且珍惜！解决虚拟机linux启动缓慢以及ssh端卡顿的问题！

优化软件以及杀毒软件想必大家都是用过的,小编自用的第一台电脑自带安装的是金山毒霸,随着时间的偏移渐渐用过小红伞,卡巴斯基,优化大师,鲁大师到后来的360优化杀毒套装,优化软件给大家带来了方便,尤其是上 ...

随机推荐

python 爬虫(一)

1. 一次简单的网页访问 urllib 是一个标准的python库(意味着不需要安装任何附件的东西来运行这个demo),包含了通过网络请求数据的方法,处理cookies,甚至更改metadata比如h ...

Linux 信号详解五(信号阻塞，信号未决)

信号在内核中的表示 执行信号的处理动作成为信号递达(Delivery),信号从产生到递达之间的状态称为信号未决(Pending).进程可以选择阻塞(Block)某个信号. 被阻塞的信号产生时将保持在未 ...

基于Theano的DL的开源小框架：Dragon

Link:https://github.com/neopenx/Dragon 起因 最近看了Hinton的Dropout,发现原来的乱代码只能在Softmax层前面加Dropout.索性把整个Thea ...

perl学习笔记

一.正则表达式 匹配一个文件中的某个单词,并打印出来 #!/usr/bin/perl use strict; use warnings; ; open(FILE, "< temp.pl ...

Python下科学计算包numpy和SciPy的安装

转载自:http://blog.sina.com.cn/s/blog_62dfdc740101aoo6.html Python下大多数工具包的安装都很简单,只需要执行 “python setup.py ...

51nod1364 最大字典序排列

不断的在cur的后面找最大的符合条件的数扔到cur的前面. 用线段树维护操作就可以了. #include #include #include& ...

javascript 字符串转为对像函数eval&lpar;&quot&semi;string&quot&semi;&rpar;

javascript有一个很有用的函数eval("string")这个函数可以把字符串转换为对象或者可以执行的语句,例如你的代码可以用obj2=eval("documen ...

&period;net解决js访问服务器端，跨域访问的问题

在Global.asax.cs文件中,添加 protected void Application_BeginRequest(object sender, EventArgs e) { HttpCont ...

linux编写&period;sh脚本并赋权限

今日打包编译项目时,发现缺少一个git pull更新项目的脚本,所以在linux编写了一个gitpull.sh脚本,能够实现更新项目的需求. 1.首先vi  gitpull.sh或者使用vim编辑器. ...

初探Asp&period;net请求机制原理 1

web原理 请求---响应 而一个 简单的请求 响应中包含太多知识,只有把 请求响应原理搞懂才能在web的世界里好好翱翔(注:自已的整理的知识参考博友们东西或自已所想,没有盗版权的意思,在此说明就不引 ...