31 | 工欲善其事必先利其器：前端性能测试工具原理与行业常用工具简介
茹炳晟
该思维导图由 AI 生成，仅供参考
你好，我是茹炳晟。今天我和你分享的主题是：工欲善其事必先利其器之前端性能测试工具原理与行业常用工具简介”。
不同于后端性能测试知识的琐碎、独立，今天我将从问答形式回到正常的分享思路上，为你介绍前端性能测试工具为。我会以一个具体网站为例，和你分析 WebPagetest 的用法，以及前端性能相关的主要概念与指标。
WebPagetest 功能简介
WebPagetest，是前端性能测试的利器：
可以为我们提供全方位的量化指标，包括页面的加载时间、首字节时间、渲染开始时间、最早页面可交互时间、页面中各种资源的字节数、后端请求数量等一系列数据；
还可以自动给出被测页面性能优化水平的评价指标，告诉我们哪些部分的性能已经做过优化处理了，哪些部分还需要改进；
同时，还能提供 Filmstrip 视图、Waterfall 视图、Connection 视图、Request 详情视图和页面加载视频慢动作。
可以说，WebPagetest 为我们提供了前端页面性能测试所需要的一切，而且还是免费的。接下来，我们就通过测试一个具体的网站，实践一下它的强大功能，以及具体使用方法吧。
使用 WebPagetest 测试某网站的首页
那么，接下来我就以某网站首页的前端性能测试和评估为例，和你一起看看如何使用这个强大的前端性能工具。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
WebPagetest是一款功能强大的前端性能测试工具，通过对具体网站的测试，文章详细介绍了WebPagetest的使用方法和测试流程。通过解读测试结果中的前端性能指标，包括Start Render、First Interactive和Speed Index等，读者可以深入了解页面性能的优劣，并学习如何优化这些指标以提升网站用户体验。同时，文章还指出了WebPagetest在实际使用中可能遇到的问题，并提供了解决方案，使读者能更高效地完成前端性能测试。此外，文章还提到了其他前端性能测试工具，如YSlow，并鼓励读者分享自己在工作中接触过的前端性能测试工具及其特点。整体而言，本文通过介绍WebPagetest的使用和测试结果解读，为读者提供了全面了解前端性能测试工具的机会，同时也引发了读者对其他前端性能测试工具的思考。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《软件测试 52 讲》，新⼈⾸单¥68
《软件测试 52 讲》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(31)
- 最新
- 精选
木易webpagetest该网站是需要特殊的操作吗？我的页面能打开，但是输入url及配置完相应的设置后，点击<start test>,会显示如下的提示:Failed recaptcha validation. Please go back and try submitting your test again 。也不会有老师文章里的相应结果作者回复: url中是否有非法字符？
2018-09-0763- llyl对于局域网的网页webpage就不支持了，怎么测试局域网网页的性能呢？
作者回复: 可以在公司内网搭建webpagetest，文章最后已经提到了这块
2018-09-073 
mgxianpuppteer之类的开源软件应该也可以获取这些数据作者回复: 是的，可以的
2018-09-082
Cynthia🌸WebPagetest！之前真的没有接触过这个工具。打算找一块时间来跟着操作实践一下，才能理解的更深入。作者回复: 是的，可以找一个世纪网站练练手，入门使用还是很快的，而且可以帮助理解前端性能的很多概念
2018-09-121
@VV@测试结果展示跟你的不一样，有什么设置吗？右上角就没有综合评分作者回复: 换一个测试发起的location，有些地域的确没有综合评分
2018-09-111
赵明月有用，哪天接触前端测试了，可以用用作者回复: 我介绍的这款工具使用来讲还是很方便的，值得一试
2018-09-101
dean不闷请问一下h5的性能，有什么好的方案吗作者回复: 你指的测试方案还是优化方案？
2018-09-071- Ivan跟“木易”提出的问题一致，url无特殊字符，这是怎么回事？（webpagetest该网站是需要特殊的操作吗？我的页面能打开，但是输入url及配置完相应的设置后，点击<start test>,会显示如下的提示:Failed recaptcha validation. Please go back and try submitting your test again 。也不会有老师文章里的相应结果）
作者回复: webpagetest故障，我也试了，可以换个发起点就好了
2018-12-28 
张扬求老师介绍web APP 性能测试方法作者回复: 后面会有两篇专门来讲这个，基于loadrunner
2018-09-07
on the way很实用 最近公司正在做前端性能优化。下午试了一把，觉得拿公司的实践。 最好可以推行CI/CD作者回复: 可以集成cicd，文章的最后也提供了相应的工具，值得一试
2018-09-07
收起评论
