如何做好 H5 性能优化？

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

红豆 Live 是微博子公司有信旗下的一款语音直播产品，有各种 H5 页面。我们在做 H5 性能测试时进行了总结，本文将为大家详细介绍 H5 性能测试的关注点、测试工具及常见问题。

二、H5 页面的劣势

HTML5 作为一门重要的开发语言，有着显著的优势，其开发速度快、运行效率高、安全性好、可扩展性强、开源自由等，但与手机端原生 APP 相比，H5 页面还具有以下劣势：

不稳定性比较强，页面跳转时更加复杂，运行速度容易受网络影响，很容易造成不流畅，甚至出现卡顿或卡死现象。

由于浏览器的导航本身占用一部分屏幕空间，H5 页面空间比 APP 小，在本身就小的移动设备屏幕中，容易造成信息记忆负担。虽然可以利用滚屏扩大页面，但人脑的短期记忆是不稳定的，用户在滚动屏幕的过程中需要临时记忆的信息越多，他们的表现就会越差。

导航不明显，原有底部导航消失，有效的导航遇到挑战等。

交互动态效果受到限制，影响一些页面场景、逻辑的理解。

功能实现相比 APP 存在差距，用户重复使用难度大，用户粘性差。

二、H5 性能优化技巧

1. 代码结构和设计

压缩组件

用户使用 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 放在底部则会引起重新绘制，用户会感受到“闪屏”的不好体验。

CSS 使用技巧

正确使用 Display 属性，因为 Display 属性会影响页面的渲染

避免图片和 iFrame 等空 Src

尽量避免重设图片大小

避免 CSS 表达式

移除空的 CSS 规则

不滥用 Web 字体、Float

不声明过多的 Font-Size

值为 0 时不需要单位

标准化各种浏览器的前缀

避免让选择符看起来像正则表达式

JS 在下载的时候会引起两个问题：阻止网页内容的展示并组织其他资源下载。下载 JS 时候，并行下载机制失效。并且在 JS 中可能包括 Document.write 等改变页面布局的操作，所以渲染引擎会等待 JS 下载完成再开始渲染。用户侧页面加载时间会因为等待而变得更长。

关于缓存

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

2. 网络请求

HTTP 请求个数

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

图片格式和大小是否合适

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

图片尺寸：当前移动设备中常用个尺寸规格为 480×800、600×1024、720×1280，800×1280 等，保证提供的原图能够被呈现，避免在代码中调整图片大小。

避免非 200 返回值

每一个 HTTP 请求都有一个相对于的返回状态标志当次请求是否如期完成，如：

1：请求收到，这些状态代码表示临时的响应。

2：操作成功，这类状态代码表明服务器成功地接受了客户端请求。

3：重定向，客户端浏览器必须采取更多操作来实现请求。

4：客户端错误，发生错误，客户端似乎有问题。

5：服务器错误，服务器由于遇到错误而不能完成该请求。

所以，如果有 HTTP 请求返回为非 200 的状态码，我们认为这一次请求时无意义的，占用了稀缺的网络资源，所应该避免非 200 的返回状态码。