1.高性能CSS3动画
与PC端场景需要相比,移动web端需要考虑的因素也相对复杂,重点考虑:流量、功耗与流畅度。在pc端上考虑更多的是流畅度,而mobile web中需要考虑网络流量的使用和耗电情况。
关于流畅度,在前端动画中主要有两种:JS动画与CSS3动画。
JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案。 而在移动端,我们选择性能更优浏览器原生实现方案:CSS3动画。然而,CSS3动画在移动多终端设备场景下,相比PC会面对更多的性能问题,主要体现在动画的卡顿与闪烁。
提升CSS3动画:
(1)尽量利用硬件能力,如使用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);
(2)动画过程闪烁
通常发生在动画开始,尝试使用hack
-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;
(3)translate3d
一个元素通过translate3d右移500px的动画流畅度高于使用left
#ball-2 {
transition: left .5s ease;
left: 0;
}
#ball-2.slidein {
left: 500px;
}
#ball-1 {
transition: -webkit-transform .5s ease;
-webkit-transform: translate3d(0, 0, 0);
}
#ball-1.slidein {
-webkit-transform: translate3d(500px, 0, 0);
}
注:3D变形会消耗更多的内存与功耗,应确实有性能问题时才去使用它,兼在权衡。
(4)尽量少用box-shadows与gradients
box-shadows
与gradients
往往都是页面的性能杀手,尤其是在一个元素同时都使用了它们,所以拥抱扁平化设计吧。
(5)尽量让动画不在文档流中,以减少重排
position: fixed;
position:absolute;
(6)优化DOM layout性能
实例代码:
// 触发两次 layout
var newWidth = aDiv.offsetWidth + 10; // Read
aDiv.style.width = newWidth + 'px'; // Write
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.height = newHeight + 'px'; // Write
// 只触发一次 layout
var newWidth = aDiv.offsetWidth + 10; // Read
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.width = newWidth + 'px'; // Write
aDiv.style.height = newHeight + 'px'; // Write
从结果分析应与执行队列有关,这是浏览器的优化策略。所有可触发layout的操作都会被暂时放入 layout-queue
中,等到必须更新的时候,再计算整个队列中所有操作影响的结果,如此就可只进行一次的layout,从而提升性能。
2.CSS动画属性性能
CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐在CSS动画中使用webkit-transform: translateX(3em)
的方案代替使用left: 3em
,因为left
会额外触发layout与paint,而webkit-transform
只触发整个页面composite
推荐一个超小手势库AlloyFinger原理:https://github.com/AlloyTeam/AlloyCrop/blob/master/asset/alloyfinger.md
裁剪解决方案:https://github.com/AlloyTeam/AlloyCrop
小程序、小游戏以及web通用canvas渲染引擎:https://github.com/dntzhang/cax
前端小记4——高性能mobile web开发的更多相关文章
-
开发库比较(3) - Mobile Web 开发 - Sencha, jquerymobiel, phonejs, jqtouch, jqmobi
我们一直坚信Html/css在界面上最终会一统江湖,因为在众多的界面编写中,qt,gtk,wpf,win form, wxwidgets等等,只有Html/CSS是真正拥有统一标准,只有这个有潜力作用 ...
-
Mobile Web开发 处理设备的横竖屏
为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间.由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的 ...
-
转载:移动web开发规范
本文来源:http://blog.csdn.net/joueu/article/details/44329825 以下是规范建议,均是日常在开发当中的的一些经验,仅供参考. 移动web开发规范 一.头 ...
-
移动Web开发实践
移动设备的高速发展给用户带来了非常大的便利.用户使用Android.iPhone和其他移动设备非常easy接入互联网. 移动设备对网页的性能要求比較高.以下就说说Mobile Web开发的一些心得. ...
-
为什么Web开发人员在2020年不用最新的CSS功能
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://dzone.com/articles/why-masses-are-not-usi ...
-
移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
-
移动Web 开发中的一些前端知识收集汇总
在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下. 要说移动Web 开发与传统的PC 端开发,感觉也没什么 ...
-
关于web开发前端h5框架的选择
关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...
-
Golang Web开发时前端出现谜之空白换行的坑
在使用Golang做Web开发时,有时候渲染出来的模板在前台显示时会出现一些奇怪的空白换行,具体特征就是查看css样式表并没有相关定义的空白部分. 分析: 查看出现问题页面的网页源代码,复制空白换行部 ...
随机推荐
-
《连载 | 物联网框架ServerSuperIO教程》- 10.持续传输大块数据流的两种方式(如:文件)
1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...
-
css-文本超出后显示省略号
1.如果是单行文本: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2.如果是多行文本,将文本框高度设为文字行高的倍数 ...
-
Linux——搭建PHP开发环境第三步:mysql
原文链接:http://www.jb51.net/article/83647.htm 1.第一步就是看linu是否安装了mysql,经过rpm -qa|grep mysql查看到centos下安装了m ...
-
基本SQL语句练习(order by,group by,having)
一.GROUP BY 和ORDER BY 1.使用Order by 进行排序,默认升序ASC,降序则使用DESC;(还可以这样:order by 1表示按第一列排序:order by 2 desc表示 ...
- javascript高级程序设计第3版——第5章 引用类型
-
git 合并分支到master
git 合并分支到master 假如我们现在在dev分支上,刚开发完项目,执行了下列命令 git add .git commit -m ‘dev'git push -u origin dev 然后 ...
-
Thymeleaf--:fragment
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" ...
-
maven pom文件
setting.xml主要用于配置maven的运行环境等一系列通用的属性,是全局级别的配置文件:而pom.xml主要描述了项目的maven坐标,依赖关系,开发者需要遵循的规则,缺陷管理系统,组织和li ...
-
uvalive 4452 The Ministers’ Major Mess
题意: 有一些部长需要对某些账单进行投票. 一个部长最多对4个账单进行投票,且每票对一个账单通过,要么否决. 问是否存在一个方案使得所有部长有超过半数的投票被通过,如果有,那么说明哪些账单的决定是明确 ...
-
spring boot2.1读取 apollo 配置中心1
第一篇:搭建apollo配置中心 为什么选择apollo,我做了一些对比: Diamond Disconf Apollo Spring Cloud Config 数据持久性 mysql mysql ...