移动端HTML5性能优化
移动端HTML5性能优化
[导读] 得益于智能手机的普及和各行各业互联网+的运动,移动端的市场占比疯狂增长。 2016年1月发布的2015年电商数据显示,2015年中国移动端网购交易额同比暴涨123 2%,在网购总交易额中的占比首次超越PC端达到55%。
技术上,HTML5大行其道:
1:有数据显示,截至2015,有80%的App全部或部分基于HTML5。
2:谷歌浏览器于9月1日起不在支持自动播放Flash。
3:亚马逊旗下网站(包括Amazon.com门户在内)的所有广告将不再使用flash。在可预见的未来,flash广告将被HTML5广告所取代。
移动端+HTML5,这个组合对前端工程师来说是个不小的挑战:如何让开发的页面能有更好的体验?这就是我们今天讨论的话题:移动端HTML5页面前端性能优化。
兄弟连HTML5培训www.itxdl.cn,如何优化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:过渡使用会引发手机过耗电增加。)
移动端HTML5性能优化的更多相关文章
- HTML5性能优化
HTML5性能优化 在看完这两章内容之后,我意犹未尽,于是乎从网上搜索关键字“Java Web高性能”,在IBM社区找到两篇不错的文章,而让人更意外的是我发现那两篇文章的内容跟<高性能HTML5 ...
- HTML5性能优化[转]
在看完这两章内容之后,我意犹未尽,于是乎从网上搜索关键字“Java Web高性能”,在IBM社区找到两篇不错的文章,而让人更意外的是我发现那两篇文章的内容跟<高性能HTML5>前两章高度相 ...
- h5移动端前端性能优化
1.脚本优化 (1)减少重绘和回流 (2)缓存Dom选择与计算 (3)缓存列表length (4)尽量使用事件代码,避免批量绑定事件 (5)尽量使用ID选择器 (6)使用touchstart.touc ...
- canvas的性能优化
canvas玩多了后,就会自动的要开始考虑性能问题了.怎么优化canvas的动画呢? [使用缓存] 使用缓存也就是用离屏canvas进行预渲染了,原理很简单,就是先绘制到一个离屏canvas中,然后再 ...
- 浅谈web前端性能优化
前端性能优化: 一.尽可能减少前端http请求. 1.合并优化脚本文件和css文件. 2.同种类型的背景图片尽量放在一起,用css控制显示. 二.使用浏览器缓存. 如果能强制浏览器缓存在本地,将会降低 ...
- H5教程:移动页面性能优化
随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情. 首先,为什么要最移动页面进行优化? 纵观目前移动网络的现状,移动页面布局越来越复杂,效果越来越炫,直接导致了文件越 ...
- 从零开始入门 K8s | etcd 性能优化实践
作者 | 陈星宇(宇慕) 阿里云基础技术中台技术专家 本文整理自<CNCF x Alibaba 云原生技术公开课>第 17 讲. 导读:etcd 是容器云平台用于存储关键元信息的组件.阿 ...
- etcd 性能优化实践
https://mp.weixin.qq.com/s/lD2b-DZyvRJ3qWqmlvHpxg 从零开始入门 K8s | etcd 性能优化实践 原创 陈星宇 阿里巴巴云原生 2019-12-16 ...
- 第17 章 : 深入理解 etcd:etcd 性能优化实践
深入理解 etcd:etcd 性能优化实践 本文将主要分享以下五方面的内容: etcd 前节课程回顾复习: 理解 etcd 性能: etcd 性能优化 -server 端: etcd 性能优化 -cl ...
随机推荐
- nyoj737 石子合并(一) 区间DP
dp[x][y]表示合并[x, y]区间的石子的最小花费,将区间长度递增枚举即可. AC代码: #include<cstdio> #include<algorithm> usi ...
- Linux的软链接和硬链接
1.Linux链接概念Linux链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link).默认情况下,ln命令产生硬链接. [硬连接]硬连接指通过索引节点 ...
- vim编辑器——常用操作整理
注意:以下的操作都是在命令状态下进行的,不要进入插入状态了.参考这里 1.删除 dd 删除一行 ndd 删除以当前行开始的n行dw 删除以当前字符开始的一个字符ndw 删除 ...
- Windows10系统故障检测你知道多少-上海IT33
Windows 10作为微软公司最新的一款操作系统,从使用的方便和界面的整洁上来说,固然是很好的,但是其因为隐私问题,致使很多人不惜一切代价想要远离Windows 10这款操作系统.尽管Windows ...
- 整理几个js上传多张图片的效果
一.普通的上传图片,张数不限制 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"&g ...
- UnicodeDecodeError: 'utf-8' codec can't decode byte 0xce in position 52: invalid continuation byte
代码: df_w = pd.read_table( r'C:\Users\lab\Desktop\web_list_n.txt', sep=',', header=None) 当我用pandas的re ...
- 让UltraEdit成为java编译器
1. ? 配置命令: 选择[高级]->[工具栏配置] ? 选择插入按钮进行命令添加: ? 依次填写命令内容: 解释:菜单项目名称:命令的名字,建议使 ...
- Android View绘制和显示原理简介
现在越来越多的应用开始重视流畅度方面的测试,了解Android应用程序是如何在屏幕上显示的则是基础中的基础,就让我们一起看看小小屏幕中大大的学问.这也是我下篇文章--<Android应用流畅度测 ...
- RGMII,MII,GMI接口
简介 RGMII(Reduced Gigabit Media Independent Interface)是Reduced GMII(吉比特介质独立接口).GMII和RGMII均采用8位数据接口,工作 ...
- dojo API中英文缩写的意思
dojo API中英文缩写的意思 1.A-Array(数组) 2.B-Boolean(布尔类型) 3.C-Constructor(构造器) 4.D-Date(日期) 5.{}-DomNode(节点) ...