这 5 个前端性能测试工具,高薪大佬们都在用!

Posted 柠檬班软件测试

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了这 5 个前端性能测试工具,高薪大佬们都在用!相关的知识,希望对你有一定的参考价值。


这 5 个前端性能测试工具,高薪大佬们都在用!


这 5 个前端性能测试工具,高薪大佬们都在用!

可模拟移动设备访问页面结果分析

这 5 个前端性能测试工具,高薪大佬们都在用!

桌面设备访问页面结果分析
这 5 个前端性能测试工具,高薪大佬们都在用!
前端开发工程师,可以根据这个报告进行页面优化

这 5 个前端性能测试工具,高薪大佬们都在用!

这 5 个前端性能测试工具,高薪大佬们都在用!

Lighthouse 是谷歌开源的一款 Web 前端性能测试工具,用于改进网络应用的质量,适用于网页版和移动端。能生成一个包括页面性能、PWA(Progressive Web apps,渐进式 Web 应用)、可访问性(无障碍)、最佳实践、SEO 的报告清单提供参考,看看可以采取哪些措施来改进您的应用。

这 5 个前端性能测试工具,高薪大佬们都在用!

● 浏览器 F12 功能

在最新的谷歌浏览器 或 Edge 浏览器 访问一个被测试网站,按 F12 ,打开开发者工具,看到最后一个项就是 Lighthouse

● 下载安装到电脑

npm install -g lighthouse


这 5 个前端性能测试工具,高薪大佬们都在用!

●   访问被测网站,打开浏览器的开发者工具

这 5 个前端性能测试工具,高薪大佬们都在用!

●  点击【生成报告】 就会自动分析你访问的网站,得出性能分析报告

这 5 个前端性能测试工具,高薪大佬们都在用!

●   这款工具,大家在用浏览器访问任意一个页面(包括需要登录,才能访问的页面),想要对这个页面进行性能分析都非常简单。


这 5 个前端性能测试工具,高薪大佬们都在用!

这 5 个前端性能测试工具,高薪大佬们都在用!

SiteSpeed 也是一款开源的,可以用于监控和检查网站性能的工具。可以通过 docker 镜像或 npm 方式来使用。这个工具,并不是单一的,而是一组工具集合,可以根据自己需要,选择适合自己的工具。


这 5 个前端性能测试工具,高薪大佬们都在用!

●  docker 安装使用

这 5 个前端性能测试工具,高薪大佬们都在用!

●  npm 安装使用

这 5 个前端性能测试工具,高薪大佬们都在用!

这 5 个前端性能测试工具,高薪大佬们都在用!

●  测试结束后,会把测试结果写到 html 文件

这 5 个前端性能测试工具,高薪大佬们都在用!

●   可以通过顶部菜单,查看更多详细信息

这 5 个前端性能测试工具,高薪大佬们都在用!
Speedcurve 是一个前端性能综合监控网站,可以在网站输入被测网站的 url 地址,进行测试,

这 5 个前端性能测试工具,高薪大佬们都在用!

选择要默认访问网站的设备,进行模拟访问,

这 5 个前端性能测试工具,高薪大佬们都在用!

访问后,网站会给出一份性能测试监控报告,

这 5 个前端性能测试工具,高薪大佬们都在用!

通过报告,可以看到详细信息。


这 5 个前端性能测试工具,高薪大佬们都在用!
webpagetest 和上面的 speedcurve 相似,也是在一个网站中,输入被测试的网站 ip 地址,就可以对被测网站页面进行分析。但是,这个网站在国内,被友好的和谐了,会出现无法正常进行测试的情况。

这 5 个前端性能测试工具,高薪大佬们都在用!

好了,这些是现在比较方便的前端性能测试工具,你都了解吗?可能有同学会说为什么没有yslow,嗯,这个也是前端性能测工具,但是,你可以去搜索下,看下你现在的电脑上能非常方便的使用这个工具吗?
yslow,不可否认,是一款经典的 Web 端性能测试工具,但是现在使用起来非常的不方便,所以现在你想去学习这款工具,可能事功半,收不到预期的效果,所以,个人不推荐大家学习这款工具了。
说明:本文为柠檬班Allen老师原创,转载需注明出处

一波硬气的广告来了! 

柠檬班的粉丝们注意啦~

这 5 个前端性能测试工具,高薪大佬们都在用!

这 5 个前端性能测试工具,高薪大佬们都在用!
获取测试工具相关视频资料

这 5 个前端性能测试工具,高薪大佬们都在用!

这 5 个前端性能测试工具,高薪大佬们都在用!

可加多多老师微信

13327216354


或者扫描下方二维码

这 5 个前端性能测试工具,高薪大佬们都在用!

这 5 个前端性能测试工具,高薪大佬们都在用!




我就知道你「在看」

以上是关于这 5 个前端性能测试工具,高薪大佬们都在用!的主要内容,如果未能解决你的问题,请参考以下文章

VSCode :大佬们都在用的快捷键!提升开发效率,建议先收藏!

Node.js --- 前端高薪之路绕不过去的坎

一个35岁+老鸟的10年测试人生,进阶高薪测试必备这5项技能

专业冷门院校双非,汇智动力带出17K高薪的测试学员

为什么大厂前端监控都在用GIF做埋点?

前端开发必备的 5 个「高薪」技能