如何做好 H5 性能优化

一．背景
智能手机的普及、移动互联网的发展、微信异军突起，都为 H5 的发展提供了良好的环境。
当前，H5 已被广泛应用于营销、广告、传播之中。而针对 H5 效率慢、体验差的硬伤，如何做
好性能测试并优化其性能就显得尤为重要。

二．用户感受
当用户能够在 1-2 秒内打开 H5 页面，看到信息的展示，或者能够开始进行下一步的操作，
用户会感觉速度还好，可以接受；而页面如果在 2-5 秒后才进入可用的状态，用户的耐心会逐渐
丧失；而如果一个界面超过 5 秒甚至更久才能显示出来，这对用户来说基本是无法忍受的，也许
有一部分用户会退出重新进入，但更多的用户会直接放弃使用。

三．H5 页面的优势
HTML5 作为一门重要的开发语言，有着显著的优势，其开发速度快、运行效率高、安全性
好、可扩展性强、开源自由等。
现在很多应用已经又从原生转向 H5 的趋势，除了调用硬件设备的功能外，其他页面基本都
由 H5 来实现，因为 H5 可以直接跨平台，并且不用从新发布应用包。

四．H5 页面的劣势
但与手机端原生 APP 相比，H5 页面还具有以下劣势：
不稳定性比较强，页面跳转时更加复杂，运行速度容易受网络影响，很容易造成不流畅，甚
至出现卡顿或卡死现象。
由于浏览器的导航本身占用一部分屏幕空间，H5 页面空间比 APP 小，在本身就小的移动设备屏幕中，容易造成信息记忆负担。虽然可以利用滚屏扩大页面，但人脑的短期记忆是不稳定的，用户在滚动屏幕的过程中需要临时记忆的信息越多，他们的表现就会越差。
导航不明显，原有底部导航消失，有效的导航遇到挑战等。
交互动态效果受到限制，影响一些页面场景、逻辑的理解。
功能实现相比 APP 存在差距，用户重复使用难度大，用户粘性差。
动画效果流畅性差，并且非常耗费性能。

五．一秒钟法则
移动互联网的架构、通讯机制，与有线网络有着巨大的差异，这也给 H5 的开发带来了很大
的挑战。

这是一张手机端接入服务器的流程。

首先，手机要通过无线网络协议，从基站获得无线链路分配，才能跟网络进行通讯。无线网
络基站、基站控制器这方面，会给手机进行信号的分配，已完成手机连接和交互。获得无线链路
后，会进行网络附着、加密、鉴权，核心网络会检查你是不是可以连接在这个网络上，是否开通
套餐，是不是漫游等。核心网络有 SGSN 和 GGSN，在这一步完成无线网络协议和有线以太网的
协议转换。再下一步，核心网络会给你进行 APN 选择、IP 分配、启动计费。再往下面，才是
传统网络的步骤：DNS 查询、响应，建立 TCP 链接，HTTP GET，RTTP RESPONSE 200 OK，
HTTP RESPONSE DATA，LAST HTTP RESPONSE DATA，开始 UI 展现。

可见，通过运营商的网络上网，情况比较复杂，经过的节点太多；运营商的网络信号强度变
化频繁，连接状态切换快；网络延迟高、丢包率高；网络建立连接的代价高，传输速度快慢不等
（从 2G 到 4G，相差很大）。

而我们优化的目标，就是所谓的一秒钟法则，即达成以下的标准：
2g 网络：1 秒内完成 dns 查询、和后台服务器建立连接
3g 网络：1 秒内完成首字显示（首字时间）
wifi 网络：1 秒内完成首屏显示（首屏时间）

六．H5 性能优化方案
用户使用 H5 功能过程中，绝大多数时间都花在网络请求上，所以减少使用紧张的网络资源
在提高性能上能取得良好的收益。组件压缩就是一种减少网络传输消耗的办法。

从 HTTP 请求返回资源中的 HTML，JS，CSS，XML 等都可以设置压缩。对于已经压缩过
的资源（如图片音乐等）不需要再次压缩，收益不高，而且增加 CPU 负担。

JS，CSS 可以常通过去掉空格和回车来压缩，再经过 GZIP 压缩，能达到良好的压缩效果。

压缩方法：在 HTTP 请求中设置所接受到压缩方式，在 Server 端对 Response 资源进行
压缩再传给浏览器。一般使用 GZIP 设置 content-Encoding 字段。

设计技巧：CSS 放在顶部、JavaScript 写在底部或异步：DOM 树构建完成后，CSS 要放
到 HTML 代码的开头的 head 标签结束前。如果网页是动态生成的，那么在 head 代码完成后
可以页面输出，这样浏览器就会更快地解析出来 head 中的内容，开始下载 CSS 文件资源。而
CSS 放在底部则会引起重新绘制，用户会感受到“闪屏”的不好体验。

关于缓存：添加缓存的最终目的是为了减少 HTTP 请求，最终达到提升性能的效果，所有静
态资源都要在服务器端设置缓存，并且尽量使用长 Cache 缓存一切可缓存的资源。

网络请求：有统计证明：一个网页最终到达终端用户有 80% 的时间都是在 JS，CSS，图片，
MP3，Flash 等资源的 HTTP 请求。另一方面，HTTP 请求的数量也是有限制的，浏览器对同
一个域名有连接数限制，不同浏览器内核、不同版本的请求数不尽相同，大部分的并发请求数是 6
个。通过够控制 HTTP 请求的数量，减少 HTTP 请求时间，达到减少网页加载和呈现的时间，
能带来更好的用户体验。

关于图片：H5 中常用的图片格式有 WebP、JPG 和 PNG8。其中 WebP 的图片最小，但在 IOS 或者 Android4.0 以下的系统中可能会有兼容性问题需要解决。JPG 是最常使用的方案，大小适中，解码速度快，兼容性问题也基本不存在，在 H5 的应用中使用起来性价比最高的方案。如果有 PNG24|32 图片，尽量将其转换层 PNG8，能极大减少图片大小。BMP 是未压缩的图片格式，应该避免使用。

资源加载首屏加载:用户从点击按钮开始载入网页，在他的感知中，什么时候是“加载完成”？是首屏加载，即在可见的屏幕范围内，内容展现完全，loading 进度条消失。因此在 H5 性能优化中，一个很重要的目的就是尽可能提升这个“首屏加载”的时间，让它满足“一秒钟法则”。

按需加载:首先要明确，按需加载虽然能提升首屏加载的速度，但是可能带来更多的界面重绘，影响渲染性能，因此要评估具体的业务场景再做决定。

单页应用:在这种架构下，基本不存在页面跳转的等待时间，只需要执行 js 逻辑触发界面变化，最多进行一次网络请求，获得服务端数据，其他资源均不需要再次请求。

七．总结
目前 H5 的应用非常广泛，如何把控好 H5 的性能是一门重要的工作。从代码设计可以优化 CSS、JS、图片、缓存等。还可以通过 Chrome 开发者工具，监控 H5 的网络请求和加载时间，找到性能消耗较大的根源，优化网络请求数、网络加载时间以及渲染优化。在前端的领域中，性能优化是个永久的话题，性能优化的经验既需要对技术极致的追求，也需要持续的积累沉淀。

如何做好 H5 性能优化相关推荐

如何做好H5性能优化？
一.背景介绍智能手机的普及.移动互联网的发展.微信异军突起,都为 H5 的发展提供了良好的环境.当前,H5 已被广泛应用于营销.广告.传播之中.而针对 H5 效率慢.体验差的硬伤,如何做好性能测试并 ...
分步骤详细解说：H5性能优化方案
H5性能优化意义对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环.原本H5的渲染性能就不及native的app,如果不把性能优化做起来,将极大地影响用户使用产品的积极性. ...
[转] 钉钉的H5性能优化方案
对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环.原本H5的渲染性能就不及native的app,如果不把性能优化做起来,将极大地影响用户使用产品的积极性. 用户感受当用户能 ...
都说百度前端牛，来看看百度前端工程化之H5性能优化
导读:从粗糙到精致,从简单到复杂,全球互联网Web App(网页应用)平均体积已增压到1.6Mb,随着音视频等富媒体内容的流量池膨胀,终端设备上的用户对网页装载速度尤其敏感.页面不能做到秒开,就会有大 ...
H5性能优化报告以及方案模板
H5性能优化方案: 链接:https://pan.baidu.com/s/1LCT83dJMmkvXabne3aWnzw 提取码:dc5z H5性能优化报告: 链接:https://pan.baidu ...
H5性能优化与体验优化——极致篇
性能优化 H5的性能优化有一个很重要的指标--首屏加载速度.而我们一般所说的H5性能优化指的也是如何提升首屏加载速度.而我们常用的优化首屏速度的方案,可以大致总结为以下几种: 首屏资源懒加载,延迟加载 ...
WEB/H5性能优化总结
我们今天来说说前端图形渲染优化,因为我接下来的时间可能要开始研究webgl方面的东西,所以就在这里把之前做过的H5做一个总结,现同步发布于GERRY_BLOG,TiMiGerry-知乎,转载请保留链接 ...
怎么做好Java性能优化
0. 开篇性能优化是一个很复杂的工作,且充满了不确定性.它不像Java业务代码,可以一次编写到处运行(write once, run anywhere),往往一些我们可能并不能察觉的变化,就会带来惊 ...
做好DBA，做好SQLServer性能优化
怎样查出SQLServer的性能瓶颈 --王成辉翻译整理,转贴请注明出自微软BI开拓者[url]www.windbi.com[/url] --原帖地址如果你曾经做了很长时间的DBA,那么你会了解到S ...

如何做好 H5 性能优化

如何做好 H5 性能优化相关推荐

最新文章

热门文章