移动端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性能优化的更多相关文章

  1. HTML5性能优化

    HTML5性能优化 在看完这两章内容之后,我意犹未尽,于是乎从网上搜索关键字“Java Web高性能”,在IBM社区找到两篇不错的文章,而让人更意外的是我发现那两篇文章的内容跟<高性能HTML5 ...

  2. HTML5性能优化[转]

    在看完这两章内容之后,我意犹未尽,于是乎从网上搜索关键字“Java Web高性能”,在IBM社区找到两篇不错的文章,而让人更意外的是我发现那两篇文章的内容跟<高性能HTML5>前两章高度相 ...

  3. h5移动端前端性能优化

    1.脚本优化 (1)减少重绘和回流 (2)缓存Dom选择与计算 (3)缓存列表length (4)尽量使用事件代码,避免批量绑定事件 (5)尽量使用ID选择器 (6)使用touchstart.touc ...

  4. canvas的性能优化

    canvas玩多了后,就会自动的要开始考虑性能问题了.怎么优化canvas的动画呢? [使用缓存] 使用缓存也就是用离屏canvas进行预渲染了,原理很简单,就是先绘制到一个离屏canvas中,然后再 ...

  5. 浅谈web前端性能优化

    前端性能优化: 一.尽可能减少前端http请求. 1.合并优化脚本文件和css文件. 2.同种类型的背景图片尽量放在一起,用css控制显示. 二.使用浏览器缓存. 如果能强制浏览器缓存在本地,将会降低 ...

  6. H5教程:移动页面性能优化

    随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情. 首先,为什么要最移动页面进行优化? 纵观目前移动网络的现状,移动页面布局越来越复杂,效果越来越炫,直接导致了文件越 ...

  7. 从零开始入门 K8s | etcd 性能优化实践

    作者 | 陈星宇(宇慕)  阿里云基础技术中台技术专家 本文整理自<CNCF x Alibaba 云原生技术公开课>第 17 讲. 导读:etcd 是容器云平台用于存储关键元信息的组件.阿 ...

  8. etcd 性能优化实践

    https://mp.weixin.qq.com/s/lD2b-DZyvRJ3qWqmlvHpxg 从零开始入门 K8s | etcd 性能优化实践 原创 陈星宇 阿里巴巴云原生 2019-12-16 ...

  9. 第17 章 : 深入理解 etcd:etcd 性能优化实践

    深入理解 etcd:etcd 性能优化实践 本文将主要分享以下五方面的内容: etcd 前节课程回顾复习: 理解 etcd 性能: etcd 性能优化 -server 端: etcd 性能优化 -cl ...

随机推荐

  1. LOJ6003 - 「网络流 24 题」魔术球

    原题链接 Description 假设有根柱子,现要按下述规则在这根柱子中依次放入编号为的球. 每次只能在某根柱子的最上面放球. 在同一根柱子中,任何2个相邻球的编号之和为完全平方数. 试设计一个算法 ...

  2. asp.net程序发布详解

    本文转载自Alan_beijing的博客ASP.NET 程序发布详细过程.内容进行了部分更改. ASP.NET网站的发布,无论是初学者还是高手,在程序的发布过程中或多或少会存在一些问题,譬如VS发布A ...

  3. hibernate中的缓存问题与快照机制

    1.  什么是缓存 数据存储到数据库里面,数据库本身是一个文件系统,使用流方式操作文件(效率不高) 改进方式:把数据存到内存中,不需要使用流方式,可以直接读取内存中的数据 缓存:内存中的临时数据,当内 ...

  4. linux redis基础应用 主从服务器配置

    Redis基础应用 redis是一个开源的可基于内存可持久化的日志型,key-value数据库redis的存储分为内存存储,磁盘存储和log文件三部分配置文件中有三个参数对其进行配置 优势:和memc ...

  5. zabbix监控安装

    1.关闭iptables和selinux # systemctl stop firewalld # systemctl disable firewalld # setenforce 2.安装yum源 ...

  6. mysql常用基础操作语法(十二)~~常用数值函数【命令行模式】

    数值函数是常用函数之一,也是学习mysql必会的,常用的有如下一些: 1.ceil:返回大于某个数的最小整数值: 2.floor:和上一个相反,返回小于某个数的最大整数值: 3.round:返回某个数 ...

  7. PHP openssl函数库

    php openssl 函数库中.提供了大量的函数.但是我们一般用的最多的,就是 openssl_encrypt string openssl_encrypt ( string $data , str ...

  8. MyEclipse报错

    MyEclipse报错

  9. 从VGA到GPU!细数二十年显卡发展历程

    VGA有很多层涵义,本来是用于代表一个分辨率(您可能不了解VGA,但应该知道QVGA代表什么),随后被普遍称为显示输出接口.为了输出VGA分辨 率.提供VGA输出接口,显卡和VGA就有了不解之缘,显卡 ...

  10. java.sql.SQLException: Access denied for user 'sa'@'localhost' (using password: YES)

    1.错误描述 ERROR:2015-05-01 23:43:04[localhost-startStop-1] - HHH000319: Could not get database metadata ...