如何做好 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 的网络请求和加载时间，找到性能消耗较大的根源，优化网络请求数、网络加载时间以及渲染优化。在前端的领域中，性能优化是个永久的话题，性能优化的经验既需要对技术极致的追求，也需要持续的积累沉淀。