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分钟左右）

一、HTTP请求过多

 

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

 

二、图片空白部分太多

 

这里须要用到的图片仅仅是做为右上角分享，可是在咱们请求的图片确实整张完整的图。
能够考虑请求小的切图，经过CSS控制图片显示位置。

 

 

三、图片尺寸

 

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

 

 

四、没有使用的资源

 

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

 

 

五、返回码非200

 

 

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

• 404：上图请求图片时出现404：一方面，可能图片自己在H5中就不展现，因此这里直接去掉多余的链接就行了。另外一方面，可能H5中须要该图片，而刚好访问结果为404，那此时就定位了一个bug 的存在。

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

六、未使用CDN，未设置cache

 

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

 

 

七、资源未压缩

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