移动端H5优化
H5前端优化收藏的网址:
https://zhuanlan.zhihu.com/p/25176904
http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201412/293834.shtml
如何优化HTML5在移动设置上的性能表现,首先需要明确以下几个原则:
1、PC优化手段在Mobile端同样适用。
2、在Mobile侧我们提出三秒种渲染完成首屏指标。
3、基于第二点,首屏加载3秒完成或使用Loading。
4、基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB。
5、Mobile端因手机配置原因,除加载外渲染速度也是优化重点。
6、基于第五点,要合理处理代码减少渲染损耗。
7、基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置。
8、加载完成后用户交互使用时也需注意性能。
接下来先看一张小抄神图:
之所以说是神图,是因为它基本上涵盖了所有的优化方案!非常详尽!在这里,我们针对其中几个代表性方案进行探讨:
加载优化
对于移动端的网页来说,加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点,当然,手机站的其他前端要素优化也是不能忽略的。
1、减少HTTP请求
因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个,建议优化要点为以下2点:
1、合并CSS、Java
2、合并小图片,使用雪碧图
2、缓存
使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)。
1、缓存一切可缓存的资源
2、使用长Cache(使用时间戳更新Cache)
3、使用外联式引用CSS、Java
3、压缩HTML、CSS、Java
减少资源大小可以加快网页显示速度,所以要对HTML、CSS、Java等进行代码压缩,并在服务器端设置GZip。
1、压缩(例如,多余的空格、换行符和缩进)
2、启用GZip
4、无阻塞
写在HTML头部的Java(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,Java放在页面尾部或使用异步方式加载
5、使用首屏加载
首屏的快速显示,可以大大提升用户对页面速度的感知,因此应尽量针对首屏的快速显示做优化。
6、按需加载
将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量。
1、LazyLoad
2、滚屏加载
3、通过Media Query加载
另外,提醒大家一点:按需加载会导致大量重绘,影响渲染性能。
7、预加载
大型重资源页面(如游戏)可使用增加Loading的方法,资源加载完成后再显示页面,但Loading时间过长,会造成用户流失。
1、可感知Loading(如进入空间游戏的Loading)
2、不可感知的Loading(如提前加载下一页)
3、对用户行为分析,可以在当前页加载下一页资源,提升速度。
8、压缩图片
图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示。
1、使用智图
2、使用其它方式代替图片(使用CSS3;使用SVG;使用IconFont)
3、使用Srcset
4、选择合适的图片(webP优于JPG;PNG8优于GIF)
5、选择合适的大小(首次加载不大于1014KB;基于手机屏幕一般宽度不宽于640)
提醒大家一点:过度压缩图片大小影响图片显示效果。
9、减少Cookie,避免重定向以及异步加载第三方资源
Cookie会影响加载速度,所以静态资源域名不使用Cookie。另外,重定向会影响加载速度,所以在服务器正确设置避免重定向。还有,第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源。
脚本执行优化
脚本处理不当会阻塞页面加载、渲染,因此在使用时需要注意以下几点:
1、CSS写在头部,Java写在尾部或异步。
2、避免图片和iFrame等的空Src,空Src会重新加载当前页面,影响速度和效率。
3、尽量避免重设图片大小,重设图片大小是指在页面、CSS、Java等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能。
4、图片尽量避免使用DataURL,DataURL图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长。
CSS优化
1、尽量避免写在HTML标签中写Style属性。
2、避免CSS表达式,CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式。
3、移除空的CSS规则,空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则。
4、正确使用Display的属性,Display属性会影响页面的渲染,建议各位站长要合理使用。
(1)、display:inline后不应该再使用width、height、margin、padding以及float
(2)、display:inline-block后不应该再使用float
(3)、display:block后不应该再使用vertical-align
(4)、display:table-*后不应该再使用margin或者float
5、不滥用Float,Float在渲染时计算量比较大,尽量减少使用。
6、不滥用Web字体,Web字体需要下载,解析,重绘当前页面,尽量减少使用。
7、不声明过多的Font-size,过多的Font-size引发CSS树的效率。
8、值为0时不需要任何单位,为了浏览器的兼容性和性能,值为0时不要带单位。
9、标准化各种浏览器前缀
(1)、无前缀应放在最后。
(2)、CSS动画只用(-webkit- 无前缀)两种即可。
(3)、其它前缀为“-webkit- -moz- -ms-无前缀”四种(-o-Opera浏览器改用blink内核,所以淘汰)。
10、避免让选择符看起来像正则表达式。
高级选择器执行耗时长且不易读懂,避免使用。
Java执行优化
1、减少重绘和回流
(1)、避免不必要的Dom操作
(2)、尽量改变Class而不是Style,使用classList代替className
(3)、避免使用document.write
(4)、减少drawImage
2、缓存Dom选择与计算,每次Dom选择都要计算,缓存他。
3、缓存列表.length,每次.length都要计算,用一个变量保存这个值。
4、尽量使用事件代理,避免批量绑定事件。
5、尽量使用ID选择器,ID选择器是最快的。
6、TOUCH事件优化,使用touchstart、touchend代替click,因快影响速度快,但应注意Touch响应过快,易引发误操作。
渲染优化
HTML文档是以包含文档编码信息的数据流方式在网络间传输,页面的编码信息一般会在HTTP响应的头部信息或在文档内的HTML标记中指明,客户端浏览器只有在确定了页面编码后才能正确的渲染页面,所以在绘制页面或执行任何的java代码前,大部分的浏览器(ie6、ie7、ie8除外)都 会缓冲一定字节的数据来从中查找编码信息,不同的浏览器当中预缓冲的字节数是不一样的。
1、HTML使用Viewport
Viewport可以加速页面的渲染,请使用以下代码:
2、减少Dom节点
Dom节点太多影响页面的渲染,应尽量减少Dom节点。
3、动画优化
(1)、尽量使用CSS3动画。
(2)、合理使用requestAnimationFrame动画代替setTimeout。
(3)、适当使用Canvas动画5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)。
4、高频事件优化
Touchmove、Scroll事件可导致多次渲染。
(1)、使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染。
(2)、增加响应变化的时间间隔,减少重绘次数。
5、GPU加速
CSS中以下属性(CSS3 transitions、CSS3 3Dtransforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用。(PS:过渡使用会引发手机过耗电增加。)
移动端H5优化的更多相关文章
- 移动端H5活动页优化方案
背景 项目:移动端H5电商项目 痛点:慢!!! 初始方案:最基本的图片懒加载,静态资源放到cdn,predns等等已经都做了.但是还是慢,慢在哪? 显而易见的原因:由于前后端分离,所有的数据都由接口下 ...
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 解惑好文:移动端H5页面高清多屏适配方案 (转)
转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...
- 移动端网站优化指南-WAP篇
转载:http://seofangfa.com/mobile-seo/mobile-seo-guide.html 1.域名优化:启用短域名,例如:m.abc.com,便于用户记忆,方便搜索蜘蛛查找,减 ...
- 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml
机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...
- [转]:移动端H5页面高清多屏适配方案
原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...
- 移动端h5页面的设计稿尺寸
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...
- 美图App的移动端DNS优化实践:HTTPS请求耗时减小近半
本文引用了颜向群发表于高可用架构公众号上的文章<聊聊HTTPS环境DNS优化:美图App请求耗时节约近半案例>的部分内容,感谢原作者. 1.引言 移动互联网时代,APP 厂商之间的竞争非常 ...
- 移动端H5混合开发设置复盘与总结
此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...
随机推荐
- Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法
Ant Design 表单中getFieldDecorator.getFieldValue.setFieldValue用法 一.getFieldDecorator getFieldDecorator是 ...
- 11 个最佳的 Python 编译器和解释器
原作:Archie Mistry 翻译:豌豆花下猫@Python猫 原文:https://morioh.com/p/765b19f066a4 Python 是一门对初学者友好的编程语言,是一种多用途的 ...
- C#事件(Event): 发布符合 .NET Framework Guidelines 的事件
本文翻译整理自:https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/events/how-to-publish-event ...
- enum sizeof typedef分析
1.枚举类型的使用方法 enum是C语言中的一种自定义类型 enum值是可以根据需要自定义的整型值 第一个定义的enum值默认为0 默认情况下的enum值是在前一个定义值的基础上加1 enum类型的变 ...
- 机器学习-特征工程-Missing value和Category encoding
好了,大家现在进入到机器学习中的一块核心部分了,那就是特征工程,洋文叫做Feature Engineering.实际在机器学习的应用中,真正用于算法的结构分析和部署的工作只占很少的一部分,相反,用于特 ...
- 架构师JavaScript 的对象继承方式,有几种程序写法?
架构师JavaScript 的对象继承方式,有几种程序写法? 一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数, ...
- 1.用户交互Scanner
Java流程控制 一:用户交互Scanner Scanner对象: 之前我们学的基本语法中我们并没有实现程序和人的交互,但是Java给我们提供了这样一个工具类,我们可以获取用户的输入.java.uti ...
- maven install 报错 Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12.4:test
pom文件引入以下依赖 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId> ...
- (树形DP入门题)Anniversary party(没有上司的舞会) HDU - 1520
题意: 有个公司要举行一场晚会.为了让到会的每个人不受他的直接上司约束而能玩得开心,公司领导决定:如果邀请了某个人,那么一定不会再邀请他的直接的上司,但该人的上司的上司,上司的上司的上司等都可以邀请. ...
- Codeforces Choosing Laptop 题解
这题实在是太水了,具体看注释 蒟蒻的方法是一边找过时的电脑一边比大小 蒟蒻不才,只会C++ 其实还会free basic,但它已经过时了 附: 本题洛谷网址 Codeforces网址 希望蒟蒻的题解能 ...