值得推荐的 5 个前端性能测试工具

前言

PageSpeed Insights

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

webtest01.png

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

webtest02.png

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

webtest03.png

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

Lighthouse

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

  • 使用方法

    • 浏览器F12功能
      • 在最新的谷歌浏览器 或 Edge浏览器 访问一个被测试网站,按F12 ,打开开发者工具,看到最后一个项就是 Lighthouse
    • 下载安装到电脑
    npm install -g lighthouse

  • 测试某个网站

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

    sitespeed01.png

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

    sitespeed02.png

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

SiteSpeed

  • 简介

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

    • docker 安装使用
    sudo docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:14.4.0 https://www.taobao.com/ # https://www.taobao.com/ 是被测试的网站
  • npm安装使用
  • $ npm install -g sitespeed.io # 安装 $ sitespeed.io https://www.taobao.com/ # 测试淘宝网站

  • 测试结果

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

    Snipaste20200901sitespeed01.png

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

Speedcurve

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

Snipaste20200901speedcurve01.png

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

Snipaste20200901speedcurve03.png

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

Snipaste20200901speedcurve04.png

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

webpagetest

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

Snipaste20200901webpagetest01.png

好了,这些是现在比较方便的前端性能测试工具,你都了解吗?可能有同学会说为什么没有yslow,嗯,这个也是前端性能测工具,但是,你可以去搜索下,看下你现在的电脑上能非常方便的使用这个工具吗?yslow,不可否认,是一款经典的web端性能测试工具,但是现在使用起来非常的不方便,所以现在你想去学习这款工具,可能事被功半,收不到预期的效果,所以,个人不推荐大家学习这款工具了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/287643.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

7-验证码识别

文章目录 验证码识别1、验证码的用途和分类验证码的作用验证身份验证行为 验证码的类型静态验证码:图片验证码问答式验证码问答式验证码行为式验证码:点击行为式验证码:拖动间接式验证码:短信、邮件、语音电话无感验证码 2、验证码…

微信小程序封装vant 下拉框select 多选组件

老规矩先上效果图&#xff1a; 本组件主要由小程序vant ui组件&#xff0c;vant 小程序ui网址&#xff1a;vant-weapp 主要代码如下: 先封装子组件&#xff1a; select-checkbox 放在 components 文件夹里面 select-checkbox.wxml: <view><van-field label"{…

1月3日代码随想录反转二叉树

226翻转二叉树 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1]示例 2&#xff1a; 输入&#xff1a;root [2,1,3] 输出&#xff1a;[2,3,…

HarmonyOS调研分享

经过十多年的发展&#xff0c;传统移动互联网的增长红利已渐见顶。万物互联时代正在开启&#xff0c;应用的设备底座将从几十亿手机扩展到数百亿 IoT 设备。GSMA 预测到 2025 年&#xff0c;全球物联网终端连接数量将达 246 亿个&#xff0c;其中消费物联网终端连接数量将达 11…

Kaggle:数据科学竞赛的殿堂与个人成长的舞台

一、产品简介&#xff1a; 它是一个举办数据科学竞赛、托管数据库、编写和分享代码的在线平台。这个数据集就像一个超级大的信息库&#xff0c;包含了我们日常生活中的各种事情&#xff0c;比如电子游戏的销量啊&#xff0c;还有空气质量如何受到污染等等。这些信息都是现实中…

中学生适宜用什么样的台灯?分享适合中学生的护眼台灯

现在的学生都面临着很大的学习压力&#xff0c;每天长时间的用眼&#xff0c;加上缺少户外运动&#xff0c;这也导致国内大多数青少年学生都存在近视的现象。所以保护眼睛、保护孩子视力健康这件事是刻不容缓的&#xff0c;而我们能为孩子做的就是监督孩子养成良好的用眼习惯&a…

javascript 常见工具函数(三)

21.克隆数组的几种方法&#xff1a; &#xff08;1&#xff09;slice方法&#xff1a; let arr [1,2,3,4] let arr1 arr.slice() //或者是 let arr1 arr.slice(0) arr[0] 6 console.log(arr) // [6, 2, 3, 4] console.log(arr1) // [1, 2, 3, 4] &#xff08;2&…

docker安装esrally教程

本来用源码安装&#xff0c;首先要安装git,python,jdk&#xff0c;还要配环境特别繁琐&#xff0c;好不容易安装好后运行报如下错误&#xff0c;在官网和github搜不到解决方案&#xff0c;无奈之下只能用docker安装。 [ERROR] Cannot race. Error in load generator [0]Cannot…

MS5148T荣获2023电子信息半导体行业年度卓越产品

MS5148T是一款适合高精度、低成本测量应用的24bit模数转换器。内部集成了低噪声可编程增益放大器、高精度Δ-Σ模数转换器和内部振荡器、低温漂基准和两路匹配的可编程电流源&#xff0c;以及传感器检测Burnout电流源和偏置电压产生器&#xff0c;支持四路差分输入。 主要特点…

设计模式之建造者模式【创造者模式】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档> 学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某…

rime中州韵小狼毫 inputShow lua Filter 输入字符透传滤镜

在 rime中州韵小狼毫 inputShow lua Translator 一文中&#xff0c;我们通过 inputShow.lua 定制了 inputShow_translator&#xff0c;这使得我们的输入方案可以将用户输入的字符透传到候选列表中来。如下&#x1f447;&#xff1a; &#x1f446;上图中我们在候选列表中看到了…

excel需要把一个表格的信息放到另一个表格中,但是两个表格列的顺序不同,用VLOOKUP函数

情景再现&#xff1a; 图1 图2 任务&#xff1a;图1中信息不全&#xff0c;需要把图2中的身份证号和手机号填到图1中&#xff0c;且需保持图1人员顺序不变。 困难之处&#xff1a;1.目前人员较少&#xff0c;尚且可以搜索着一个个输入&#xff0c;但如果好几百好几千人呢&am…

学习Vue及项目工程化

学习Vue及项目工程化 Vue快速上手插值表达式 Vue基本命令v-htmlv-showv-if 和 v-else 和 v-else-ifv-on和click函数调用v-bindv-for案例--书架 v-model功能总结 综合案例-小黑记事本列表渲染删除功能添加功能底部统计清空 项目工程化更换npm镜像方式一&#xff1a;在网页是去创…

RKE安装k8s及部署高可用rancher之证书在外面的7层LB(nginx中) 7层负载均衡

一 了解 Rancher 1 推荐架构 安装 Rancher 的方式有两种&#xff1a;单节点安装和高可用集群安装。因为单节点安装只适用于测试和 demo 环境&#xff0c;而且单节点安装和高可用集群安装之间不能进行数据迁移&#xff0c;所以推荐从一开始就使用高可用集群安装的方式安装 Ran…

初学者快速入门学习日语,PDF文档音频教学资料合集

一、资料描述 本套学习资料是很全面的&#xff0c;共有734份文件&#xff0c;包括PDF&#xff0c;PPT&#xff0c;表格&#xff0c;图片&#xff0c;音频等多种格式&#xff0c;可以作为初级日语的学习教材&#xff0c;也是非常适合初学者入门的&#xff0c;可以帮助大家快速的…

在macOS中搭建.NET MAUI开发环境

文章目录 准备安装扩展安装 .NET安装工作负载安装 Xcode 命令行工具调试安卓应用安装 JDK安装 Android SDK 安装 Android 模拟器安装模拟器安装镜像创建虚拟机 同意许可条款创建 MAUI 项目调试 MAUI 应用切换调试目标 参考资料 准备 一台 macOS Monterey 以上的电脑安装 XCode…

Android14之audit2allow自动生成Selinux规则(一百七十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

软考网络工程师教程第五版(2018最新版)

软考网络工程师教程第五版(2018最新版) 内容简介 本书是全国计算机技术与软件专业技术资格(水平)考试指定用书。作者在前4版的基础上,根据网络工程师新版大纲的要求,针对考试的重点内容做了较大篇幅的修订,书中主要内容包括数据通信、广域通信网、局域网、城域网、因特网…

Vue实现JSON字符串格式化编辑器组件

相信很多同学都用过网上的在线JSON格式化工具来将杂乱的JSON数据转换成易于我们阅读和编辑的格式。那么&#xff0c;你有没有想过自己动手实现一个这样的工具呢&#xff1f;今天&#xff0c;我将介绍如何使用Vue.js来构建一个简单的JSON格式化工具。 功能简述 支持格式化JSON字…

一起读《奔跑吧Linux内核(第2版)卷1:基础架构》- 大小端字节序

关注 点赞 不错过精彩内容 大家好&#xff0c;我是硬核王同学&#xff0c;最近在做免费的嵌入式知识分享&#xff0c;帮助对嵌入式感兴趣的同学学习嵌入式、做项目、找工作! Hello&#xff0c;大家好我是硬核王同学&#xff0c;是一名刚刚工作一年多的Linux工程师&#xff0…