软件测试31-工欲善其事必先利其器：前端性能测试工具原理与行业常用工具简介

今天我和你分享的主题是：工欲善其事必先利其器之前端性能测试工具原理与行业常用工具简介”。

不同于后端性能测试知识的琐碎、独立，今天我将从问答形式回到正常的分享思路上，为你介绍前端性能测试工具为。我会以一个具体网站为例，和你分析 WebPagetest 的用法，以及前端性能相关的主要概念与指标。

WebPagetest 功能简介

WebPagetest，是前端性能测试的利器：

• 可以为我们提供全方位的量化指标，包括页面的加载时间、首字节时间、渲染开始时间、最早页面可交互时间、页面中各种资源的字节数、后端请求数量等一系列数据；
• 还可以自动给出被测页面性能优化水平的评价指标，告诉我们哪些部分的性能已经做过优化处理了，哪些部分还需要改进；
• 同时，还能提供 Filmstrip 视图、Waterfall 视图、Connection 视图、Request 详情视图和页面加载视频慢动作。

可以说，WebPagetest 为我们提供了前端页面性能测试所需要的一切，而且还是免费的。接下来，我们就通过测试一个具体的网站，实践一下它的强大功能，以及具体使用方法吧。

使用 WebPagetest 测试某网站的首页

那么，接下来我就以某网站首页的前端性能测试和评估为例，和你一起看看如何使用这个强大的前端性能工具。

首先，访问 WebPagetest 的主页“http://www.webpagetest.org/” ，也就是工具的使用界面。

1. 将被测页面的地址填写到被测 Website URL 栏中；

2. 选择测试发起的地域（Test Location）以及你希望使用的浏览器，这里我选择了美国旧金山、Chrome 浏览器。

WebPagetest 在全球各大洲的很多国家和地区都有自己的测试代理机，这些测试代理机可能是虚拟机，也可能是真机，还有很多是建立在 Amazon EC2 上的云端机器。另外，WebPagetest 除了支持各种浏览器以外，还支持主流的 Android 设备和 Apple 设备。

然后，选择需要模拟的网络情况。这里我选择了有线网络 Cable，当然你也可以根据你的测试要求选择各种 3G 或者 4G 移动网络。

接着，在 Repeat View 中选择“First View and Repeat View”。这是一个很关键的选项。我们知道当使用浏览器访问网站时，第一次打开一个新的网页往往会很慢，而第二次打开通常就会快很多，这是因为浏览器端会缓存很多资源。这个选项的意思就是既要测试第一次打开页面的前端性能（First View），也要测试在有缓存情况下重复打开的前端性能（Repeat View）。

最后，点击“Start Test”发起测试。最终的测试设置界面，如图 1 所示。由于全球所有的用户会共享这些散布在各地的测试代理机，所以发起测试后，一般情况下我们的测试并不会被立即执行，而是会进入排队系统。当然，WebPagetest 界面会清楚地告诉你排在第几位。

图 1 WebPagetest 的测试执行界面

测试执行完成后，我们会看到如图 2 所示的测试结果页面。这个页面包含非常多的信息，接下来我会一一解读这些信息，同时跟你分享前端性能指标相关的概念。