美文网首页web 前端
这五个超好用的前端性能测试工具,高薪的大佬们都在用

这五个超好用的前端性能测试工具,高薪的大佬们都在用

作者: WEB前端含光 | 来源:发表于2020-09-19 13:35 被阅读0次

谷歌开发的一个免费的网页分析工具,在地址栏中输入被分析的网站 url 地址,点击分析,



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



桌面设备访问页面结果分析

前端开发工程师,可以根据这个报告进行页面优化

Lighthouse

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

使用方法
浏览器 F12 功能

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

下载安装到电脑

npm install -g lighthouse

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


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

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

SiteSpeed

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

安装
docker 安装使用


npm 安装使用
测试结果
测试结束后,会把测试结果写到 HTML 文件

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

Speedcurve

Speedcurve 是一个前端性能综合监控网站,可以在网站输入被测网站的 url 地址,进行测试



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



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

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

webpagetest

webpagetest 和上面的 speedcurve 相似,也是在一个网站中,输入被测试的网站 ip 地址,
就可以对被测网站页面进行分析。但是,这个网站在国内,被友好的和谐了,会出现无法正常
进行测试的情况。



这些是现在比较方便的前端性能测试工具,你都了解吗?可能有的人会说为什么没有
yslow,嗯,这个也是前端性能测工具,但是,你可以去搜索下,看下你现在的电脑上能非常
方便的使用这个工具吗?

yslow,不可否认,是一款经典的 Web 端性能测试工具,但是现在使用起来非常的不方便,
所以现在你想去学习这款工具,可能事被功半,收不到预期的效果,所以,个人不推荐大家学
习这款工具了。


相关文章

  • 这五个超好用的前端性能测试工具,高薪的大佬们都在用

    谷歌开发的一个免费的网页分析工具,在地址栏中输入被分析的网站 url 地址,点击分析, 可模拟移动设备访问页面结果...

  • 前端性能测试

    用什么工具测试前端性能数据相对比较准确?

  • 前端的性能测试

    web前端性能测试在线工具:WebPageTest 该工具属于在线测试工具,直接输入网址就可以测试,适合pc端的网...

  • 前端工程

    前端工程: 开发 环境 脚手架 打包工具 开发规范 模块化开发 组件仓库 性能优化 测试 单元测试 自动化测试工具...

  • 前端页面优化

    前端性能测试和调优 讲到性能测试,除了后台的之外,还有一部分是前台的性能测试,前端的性能测试这里主要需要尊从以下规...

  • Linux 性能监控、测试、优化工具

    linux性能监控,测试,优化 Linux 平台上的性能工具有很多,眼花缭乱,长期的摸索和经验发现最好用的还是那些...

  • 测试类型划分

    功能测试 性能测试 性能测试主要包含以下方面: 性能测试指标 性能测试常用工具 安全测试 安全测试常用工具 安全测...

  • 简单、好用的性能测试工具推荐

    读者提问: 有哪些好用、简单的性能测试工具推荐? 阿常回答: 1、Jmeter(开源) https://jmete...

  • 前端性能测试工具

    内网/登录/报告 https://www.cnblogs.com/yanghj010/p/8954730.html...

  • 2018-04-04

    对于web页面的性能测试分为:前端、后端的测试 首先,我们来明确下你的性能测试目的,你的目的是服务端的性能还是前端...

网友评论

    本文标题:这五个超好用的前端性能测试工具,高薪的大佬们都在用

    本文链接:https://www.haomeiwen.com/subject/blpeyktx.html