H5性能测试学习

工欲善其事，必先利其器，在做H5前端性能测试之前，选择合适的工具能让我们的测试工作事半功倍。本文要提到的工具有两类：

一类是抓包工具，如Fiddler、Charles等。这类工具不仅可以抓包，还可以对包进行修改，动态展示瀑布流，对web进行调试。在我们做H5前端性能测试的时候，个人觉得只要不修改包，不对H5调试，就可以放弃使用这类工具，不是工具不好，而是大材小用。

还有一类，这里重点提到的是如Page Speed、PCAP Web Performance Analyzer、WebPagetest这类平台型工具。我们可以快捷的测试出H5前端性能中数据，视图，并给出一定程度的优化建议。

 

（*以上为个人见解，如有疏漏和错误，请及时指正）

以手机管家端午节运营活动H5为例，附上上述工具测试结果页，当然这里仅仅是结果的罗列。具体的分析还是需要测试人员来做，衡量是否符合当前运营需求。

WebPagetest

 

Page Speed：

 

PCAP Web Performance Analyzer：

 

Chrome DevTools：

 

常见问题举例：

同样以手机管家端午节运营活动H5为例：（完成整个加载性能测试耗时只需20分钟左右）

1、HTTP请求过多

 

图为PCAP Web Performance Analyzer解析pcap包的结果，图中我们可以看出，21个http请求中，有7个是统计点发出的请求。这里可以考虑统计点合并上报和首屏时减少上报统计点。

2、图片空白部分太多

这里需要用到的图片仅仅是作为右上角分享，但是在我们请求的图片确实整张完整的图。
可以考虑请求小的切图，通过CSS控制图片显示位置。

 

3、图片尺寸

下面一张背景图，我们可以看到尺寸是1080X1919，然后当前市面上Android主流机型主要为 480x800, 480x854, 540x960, 720x1280, 800x1280 。所以，为每一个移动设备都提供一张1080X1919的图片实在没有必要。

 

4、没有使用的资源

下面这一幅图，在chrome DevTools中看到请求响应并下载成功，但是在实际的H5活动中并没有使用过。

 

5、返回码非200

 

• 非200的返回码意味着本次请求没有实质性的收获，如上图所示的两次非200请求返回值：

• 404：上图请求图片时出现404：一方面，可能图片本身在H5中就不展示，所以这里直接去掉多余的连接就好了。另一方面，可能H5中需要该图片，而恰好访问结果为404，那此时就定位了一个bug 的存在。

• 302：请求音乐时出现302重定向：从图中可以明显看出两次请求后才获取到背景音乐，从用户侧可能会感知是音乐加载速度慢。

6、未使用CDN，未设置cache

 

如果该运营活动是全国性的，且用户量很大，那么非常有可能网络“边缘”的用户没有办法正常访问该H5活动。

7、资源未压缩

 

这里详细列出了各个没有压缩的图片资源。这里要建议的图片的压缩，如上图测试结果，压缩后可以减少16K的图片资源大小。还可以考虑是否采用图片地图来减少http请求。