从0到1：打造移动端H5性能测试平台

如何打造一个移动端H5性能平台？听起来是否有点高大上，不知道如何下手。不要紧张，我们来手把手教大家打造自己的移动端H5性能测试平台。

【H5前端性能平台可以做什么–功能篇】

以前我们要测试移动端H5性能，通常会用到远程连接+抓包分析，工具诸如：fiddler，Charles。或者是一些在线测试工具：Page Speed、PCAP Web Performance Analyzer、WebPagetest。这些工具要么测试执行过程复杂，要么测试报告复杂，亦或者也看不出测试结果是好是坏。

所以我们希望移动端H5性能自动化平台能够：

1、针对移动设备：从移动设备浏览器出发，测试H5前端性能，不是PC端的，不是PC端的，不是PC端的，重要事情说三遍。

2、测试流程简单化：一键化测试，输入URL，输出测试报告，不要远程调试，不要分析数据。

3、测试结果可视化：展示H5测试过程中的http请求瀑布流，资源统计，各种时间类硬指标。

4、给出测试建议：不要只有测试数据，我希望有建设性的测试意见。

【怎么样的方案才能满足上述的功能点–方案篇】

整体思路：用户界面中输入被测H5的URL地址，发送给服务器，服务器收到URL地址后，像移动设备发送测试任务，移动设备执行测试任务，并返回测试数据，服务器解析原始测试数据，生成报表（包含可视化的数据和被测结果的建议），返回给用户。就已经满足了上面我们对系统的预期。

流程就是这么简单，但是每一步具体的方案我们还要一一来敲定。

01.用户交互系统如何实现

这里的交互就是一个web系统，无论你是采用java SSH，还是.NET,亦或者Django等等，我们认为只要是你会搭建的web站点都是可以的。

02.服务器如何给移动设备发送测试任务

移动设备需要接受服务器的任务，所以我们需要有一个app可以支持任务的管理和测试数据的采集。这里的移动设备通过USB数据线连接在服务器上，所以，使用am命令就可以轻松操控app。

03.请移动设备如何获取性能数据

在移动设备上如何获取H5性能数据，这一步是才是整个系统的重点。

这里数据分为3种：http请求类数据、时间类数据、H5性能优化建议。

http请求类数据

• 方案一 “远程调试”

远程调试的思路和PC上F12调试一个网页本质是一样的。把调试工具对PC浏览器的调试转移到对移动端设备浏览器调试上。

• 方案二 “phantomjs抓包”

phantomjs 是基于Javascript驱动的命令行webkit引擎，简单的说是一个无界面的浏览器。通过执行netsniff.js脚本，可以方便的获取URL的http请求对用的HAR包（HTTP Archive是一个用来储存HTTP请求/响应信息的通用文件格式，基于jason，HTTP监测工具以这种通用的格式导出所收集的数据，这些数据可以被其他支持HAR的HTTP分析工具所使用，来分析网站的性能。包括各类资源：包括图片，js，css等的加载情况，请求和响应时间，请求返回码等http协议的信息）。这个办法的好处是获取的http请求准确，且方便快捷，但是缺点是统计到的请求数据包括请求时间均是在PC