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

news2024/10/6 16:22:37

前言

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端性能测试工具,但是现在使用起来非常的不方便,所以现在你想去学习这款工具,可能事被功半,收不到预期的效果,所以,个人不推荐大家学习这款工具了。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HTML语义化的理解

HTML语义化是指在编写HTML代码时,合理地选择适当的标签和属性来描述页面的结构和内容,使得代码更具有可读性、可维护性和可访问性。 可读性:通过使用语义化的标签,可以清晰地表达页面的结构和内容,使得代码更易于阅读和…

基于多反应堆的高并发服务器【C/C++/Reactor】(中)在EventLoop的任务队列中添加新任务

任务队列是一个链表,每个节点包含channel类型、文件描述符和操作类型。在添加节点时,需要考虑线程同步,并确保节点被正确地添加到链表中。节点的操作可以写到另一个函数中,以便于程序的维护。在添加任务节点时,需要加互…

快速打通 Vue 3(三):Vue3 中的 watch 监听器与新特性

很激动进入了 Vue 3 的学习,作为一个已经上线了三年多的框架,很多项目都开始使用 Vue 3 来编写了 这一组文章主要聚焦于 Vue 3 的新技术和新特性 如果想要学习基础的 Vue 语法可以看我专栏中的其他博客 Vue(一):Vue 入…

线程死锁检测组件逻辑与源码

死锁介绍 任务的执行体之间互相持有对方所需的资源而不释放,形成了相互制约而都无法继续执行任务的情况,被称为“死锁”。 死锁案例 线程A持有锁a不释放,需要去获取锁b才能继续执行任务, 线程B持有锁b不释放,需要去…

winform简易用户权限管理系统

一、功能简介 1. 数据库可使用sqlite、mssql、mysql等 2. 管理员账号不管控,其余账号进行权限管控(左侧菜单,表单按钮),且只能看到自己创建的角色、用户 二、操作界面 1. 管理员账号登陆后,左侧菜单栏自动…

【Spark精讲】SparkSQL的RBO与CBO

Spark SQL核心:Catalyst Spark SQL的核心是Catalyst查询编译器,它将用户程序中的SQL/Dataset/DataFrame经过一系列操作,最终转化为Spark系统中执行的RDD。 Catalyst组成部分 Parser :用Antlr将SQL/Dataset/DataFrame转化成一棵未经解析的树…

怎么快速修复mfc140.dll文件?解决mfc140.dll缺失的方法

面对计算机报告的 ​mfc140.dll​ 文件遗失错误,这通常表明系统中缺少一个关键的动态链接库文件,该文件对于运行以 Microsoft Foundation Class (MFC) 库编写的程序十分重要,尤其是那些需要图形界面的应用程序和一些游戏。若没有这个文件&…

清风数学建模-数学规划模型

内容:数学规划模型(cab aeqbeq lbub) 一.题型类型 1.线性规划linprog 2.非线性规划 fmincon 3.整数规划 intlinprog 4.(0-1规划)(特殊的线性整数规划)intlinprog 5.多目标规划 linprog 标…

JumpServer3.0版本(用户管理、邮件、MFA认证配置)

创建用户组 控制台页面可以看见左侧的用户管理下,有用户列表和用户组 点击用户组、点击创建按钮、设置名称,用户不用选择还没建用户,提交即可 创建用户 点击用户列表创建按钮,设置名称、用户名、邮箱等必填项 这个时候用户组选项,可以选好我们创建的用户组了,先创用…

Spring高手之路-Spring Bean、Java Bean和对象的区别与联系

目录 什么是Spring Bean 什么是Java Bean 什么是对象 Spring Bean与Java Bean与对象的联系与区别 联系 区别 什么是Spring Bean 在Spring官方文档中对Bean的解释如下: In Spring, the objects that form the backbone of your application and that are manage…

MySQL数据库高级SQL语句及存储过程

目录 一、高级SQL语句 (一)case语句 1.语法定义 2.示例 (二)空值(NULL) 和 无值( ) 1.区别 2.示例 (1)字符长度 (2)判断方法 ① 空值(NULL) ② 无值( ) (3…

代码随想录算法训练DAY18|二叉树5

算法训练DAY18|二叉树5 513.找树左下角的值 力扣题目链接 给定一个二叉树,在树的最后一行找到最左边的值。 示例 1: 示例 2: 思路 本题要找出树的最后一行的最左边的值。此时大家应该想起用层序遍历是非常简单的了,反而用递归的话会比较难一点。 我…

【通关喜报】腾讯云TDSQL TCP/TCE、云运维tcp 12月认证考试,全员过关,年终冲刺!

2023年12月23日云贝教育有6位学员参加了腾讯云TDSQL-TCP以及TCE认证考试。都取得非常好的成绩~下面我们来看一下各位同学的理论考试和上机考试成绩吧~

BWP频域位置的确定

这里根据协议整理下BWP频域相关参数以及如何确定BWP的频域位置。 BWP的配置包含几个参数 : 1 SCS, CyclePrefix 和locationAndBandwidth。 BWP频域起始位置N_start_BWPOcarrierRBstart,其中Ocarrier 由RRC层参数offsetToCarrier决定。 locationAndB…

Java学习——设计模式——结构型模式2

结构型模式 结构型模式主要涉及如何组合各种对象以便获得更好、更灵活的结构。虽然面向对象的继承机制提供了最基本的子类扩展父类的功能,但结构型模式不仅仅简单地使用继承,而更多地通过组合与运行期的动态组合来实现更灵活的功能。 包括: 1…

Redis命令---String篇 (超全)

目录 1.Redis Setnx 命令 - 只有在 key 不存在时设置 key 的值。简介语法可用版本: > 1.0.0返回值: 设置成功,返回 1 。 设置失败,返回 0 。 示例 2.Redis Getrange 命令 - 返回 key 中字符串值的子字符简介语法可用版本: > 2.4.0返回值: 截取得到…

vue3 接入 Element Plus

vue3 接入 Element Plus vue3 发布已经很久了,官方也已经发布公告,自2023年12月31日起停止对 vue2 版本的维护更新,因此,vue3 正式登上了历史的舞台。组件库一直是前端开发的利器,减少了开发者开发复杂度,提…

计算机毕业设计------基于SpringCloud的实验室管理系统

项目介绍 实验室管理系统的用户可以分为两种:系统管理员和普通用户。系统管理员主要功能: 登录登出、分析数据、管理用户、管理日志、管理实验室、管理预约、维护个人资料、实验室保修管理 用户主要功能: 注册登录、查询实验室、实验室预约…

Edge浏览器的卸载(一分钟版)

一分钟看完不耽误 开整工具下载后 结尾 开整 工具 Remove-MS-Edge 看名字,简单直接 CSDN下载 资源设置是免费的,大家尽管下载 不放心软件安全的话,自己上github地址下载也行 下载后 解压之后 我们打开有gui的,也就是有界面的&…

胡润研究院发布《2023胡润中国最具历史文化底蕴品牌榜》

胡润研究院发布《2023胡润中国最具历史文化底蕴品牌榜》,前十名分别是片仔癀、同仁堂、贵州茅台、五粮液、中国银行、中华、黄山、农业银行、建设银行、汾酒。 榜单调研范围涵盖中国内地具有60年以上历史的为消费者提供产品或服务的品牌,综合考察品牌历史…