WEB 移动端 CSS3动画性能 优化

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

opacity: 1;

-webkit-backface-visibility: hidden;

-webkit-transform:translate3d(0,0,0);

这三个属性选其中一个放在要使用动画的元素中即可，很多时候你使用了-webkit-transform: 这个属性做了其它值，那么你就不能用这个了，选其它两个吧。

还有一些优化方面的就是少用 高消耗的属性 css shadow、background-attachment: fixed 等这些属性，并且如果使用了left top 定位，那么最好使用 -webkit-transform:translateX ,-webkit-transform:translateY 代替，提高动画流畅性...

时间： 2024-10-23 03:23:27

WEB 移动端 CSS3动画性能 优化的相关文章

关于CSS3动画性能

前天我去面试了...好吧,对于自己6年6份工作的悲催经历,我自己也是醉了. 但没办法,我这种当时上学没好好学习,临毕业才出家写代码的半吊子码农,起步没起好,以至于一直没能找到真正让自己满意的工作. 通过了几年的努力和累积,总算是把信心给拿回来了. 这不,又踏上我的追求之路了.我真心是希望这是我最后一次换工作了. 阿门,愿主保佑我... 那个...好像废话说得有点多了.OK,正题时间. 是这样,面试的时候,技术官问了我一个问题,引发了我的深思~那就是CSS动画的效率问题. 这个...因为之前接触移

HTML5前端（移动端网站）性能优化指南

HTML5是一种最新发布网页构架的普遍模型,是构建对程序.对用户都更有价值的数据驱动的Web的前端技术框架,它的价值在于融合CSS/javaScript/flash等众多前端开发技术,更多的体现在对交互的理解和视觉设计的还原上. HTML5框架可以提升网站的访问速度,通过优化前端将响应时间加快,使用户的等待时间减少,所谓前端是指在客户端通过浏览器发送了一个请求,除去后台系 统用户请求.执行数据查询并对结果进行组织所需要处理消耗的时间,在涌现的新技术中,JavaScript和一套新的API纯脚本技

Nginx作为WEB服务相关配置（性能优化，网络连接，访问控制，虚拟主机，https等等）

编译安装nginx yum -y install pcre-devel groupadd -r nginx useradd -g nginx -r nginx tar xf nginx-1.6.2.tar.gz cd nginx-1.6.2 ./configure --prefix=/usr/local/nginx --conf-path=/etc/nginx/nginx.conf--user=nginx --group=nginx --error-log-path=/var/log/nginx

动画性能优化－requestanimationframe、GPU等

最近在做一个场景动画,有一个欢迎界面和一个主动画界面,两个界面之间的连接通过一个进度条来完成,当进度条完成,提供通往主动画的按钮. 画面会从一个个的场景移动过去,用户可通过点击抽奖.查看气泡商铺等进行交互,同时可拖动画面,前移或后退.该项目中,出了主动画,还有人物场景对话的动画等,性能的优化.用户的体验变得尤为重要,这里总结一下在开发过程中使用的一些性能.体验优化方法. 1.动画 a.优先采用requestanimationframe,实现动画帧的并发渲染: b.做减法:兼容低版本浏览器(a中的

Skyline Web 端数据浏览性能优化

三维数据的效率一直是个瓶颈,特别是在Web端浏览一直是个问题,在IE内存限制1G的条件下,对于三维数据动不动几十G的数据量,这1G显得多么微不足道.虽然现在三维平台都是分级加载,或者在程序中采用数据分不同片区加载来降低一次性加载的模型数据,但是在浏览器中浏览三维数据崩溃问题仍然一直存在.最近在维护一个老的Skyline的项目,客户提出了在看二维数据的同时也可以看三维数据,需求很简单,实现也很容易,唯一的问题是浏览效率,能不能浏览?浏览效率怎么样?而且政府单位的电脑配置都是很一般.毕竟也做了这么多

前端性能优化（css动画篇）

正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章,学到了很多,在这里记录一下,其中的知识都是来源于这俩篇文章,我只是截取了其中比较关注的内容出来,原文地址High Performance Animations及Accelerated Rendering in Chrome 原理 现代浏览器在使用CSS3动画时,以下四种情形绘制的效率较高,分别是:* 改

前端性能优化 CSS动画

最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章,学到了很多,在这里记录一下,其中的知识都是来源于这俩篇文章,我只是截取了其中比较关注的内容出来,原文地址High Performance Animations及Accelerated Rendering in Chrome 原理 现代浏览器在使用CSS3动画时,以下四种情形绘制的效率较高,分别是: * 改变位置 * 改变大小 * 旋转 * 改变透明度 层?重绘?回流和重布局?图层重组? 首先要了解CSS的图层的概

css写作建议和性能优化小结

1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于css,很多开发者的想法就是,css只要能用来布局,把效果图排出来就可以了,其它的细节或者优化,不需要怎么考虑.但是我觉得css可不只是把页面的布局完成就是完事的,还需要考虑很多细节有优化,更不会像大家想得那么简单,在学习当中,如果发现什么技巧或者优化的点,我也会学以致用!那么今天,就分享下我总结的css写作建议和性能优化的一些问题

css3动画的性能优化

目前对提升移动端CSS3动画体验的主要方法有几点:尽可能多的利用硬件能力,如使用3D变形来开启GPU加速 -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性: 原因是