搭建自动化 Web 页面性能检测系统 —— 设计篇

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== 编辑

页面性能对于用户体验、用户留存有着重要影响,当页面加载时间过长时,往往会伴随着一部分用户的流失,也会带来一些用户差评。性能的优劣往往是同类产品中胜出的影响因素,也是一个网站口碑的重要评判标准。

一、名称解释

前端监控一般分为合成监控和真实用户监控。

1.1、合成监控

合成监控就是模拟用户的使用场景,访问一个页面,通过一些工具和规则去检测页面,提取一些性能指标,生成一份检测报告,注重检测。

合成监控的优缺点:

优点缺点
实现简单,社区方案成熟配置复杂,不能完全还原用户真实场景
能采集到更丰富的数据登录等场景需要单独处理
不影响真实用户的页面访问性能单次检测数据不够准确

1.2、真实用户监控

真实用户监控是指用户在页面上访问,访问时会产生各类性能数据,在用户访问停止的时候,将这些性能数据传输到服务端,进行数据整理分析的过程,注重监控。

真实用户监控的优缺点:

优点缺点
完全还原用户真实场景对用户的访问性能有一定影响
登录等场景无需单独解决无法采集完整的资源加载瀑布图
数据样本足够大且真实,数据价值高无法可视化展示页面加载过程

1.3、定义合适的性能指标

  1. 首次内容渲染时长(First Contentful Paint, FCP)
    页面最新出现的内容渲染时长
  2. 首次展现平均值(Speed Index, SI)
    页面内容可见填充的速度
  3. 最大内容绘制时间(Largest Contentful Paint, LCP)
    页面核心内容呈现时间,不采用 loading 状态的数据
  4. 可交互时间(Time to Interactive, TTI)
    用户是否会体验到卡顿
  5. 总阻塞时间(Total Blocking Time, TBT)
    主线程被阻塞的时间,无法作出输入响应
  6. 累计布局样式偏移(Cumulative Layout Shift, CLS)

动图封面

现在我也找了很多测试的朋友,做了一个分享技术的交流群,共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源,没人解答问题,坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化,性能,安全,测试开发等等方面有一定建树的技术大牛
分享他们的经验,还会分享很多直播讲座和技术沙龙
可以免费学习!划重点!开源的!!!
qq群号:691998057【暗号:csdn999】

二、为什么做

基于需要对公司的 Web 产品进行性能优化,在做性能优化的同时,优化的衡量标准也不可或缺。在页面开发时观察页面的性能并不够准确,因为不同的开发设备性能表现不同,所伴随的变量也较多,不能够准确的反映性能优化效果,也无法观察产品的性能变化趋势。为什么自研呢,自研有以下好处:

(1)借助第三方的性能检测服务往往不能保证检测数据的安全性。

(2)第三方的性能检测服务一般无法与公司内部系统打通流程,一般无法自动化检测公司内部产品。

(3)可以做一些自定义开发,比如根据产品特点调整不同的性能指标权重,从而更准确的计算分数。

那么在检测收集到了这么多的指标数据后,页面性能到底如何呢,如果你的老板问你公司的产品页面性能如何,你该如何回复呢?假设列举一大堆时间指标、偏移量等数据,老板看到这些数值的时候可能就是一头雾水,根本理解不了产品的页面性能到底如何。那么自研可以针对产品类型,给出一个统一的标准,这样就方便去对比各个产品的性能表现了。

三、怎么做

3.1、基础依赖

下面是检测系统的整体架构:

这里设计的性能检测系统主要包含前端页面和服务端,其中:

前端页面展示性能检测入口、检测结果、性能趋势、性能排行榜等。

服务端基于 Nestjs + Lighthouse + Puppeteer 实现,通过 Typeorm 操作 MySQL 数据库,记录和查询性能检测数据。

另外辅助一些插件进行定时监测、结果通知等操作,实现自动化检测,相比页面开发时通过开发者工具中的 Lighthouse 检测有以下好处:

(1)不用开发者主动触发;

(2)不会阻塞开发过程,无需等待;

Lighthouse 用于检测 Web 网页的性能,主要基于 4 个主要步骤实现,分别是交互驱动、性能数据收集、审计整理以及记录。具体为:

(1)用户在性能检测入口输入待检测的页面地址,点击开始检测,页面通过接口调用性能检测服务

(2)Lighthouse 遍历当前页面的收集器方法并合成一个总的收集器方法以便于采集数据

(3)对上述采集到的性能数据进行计算和评分

Lighthouse 主要提供六个收集器,通过以下六个收集器即可采集到和实际访问接近的性能数据,每个收集器的功能不一,如下:

(1)收集 DOM 元素相关数据、DOM 节点最大深度、滚动条等

(2)收集页面内的所有图片资源,并记录下每个图片元素的宽高和定位等属性

(3)收集相关指标,如:FCP、LCP、CLS 等

(4)收集 JS 事件监听数量、JS 堆栈等

(5)收集页面的所有请求,包括状态码、请求头、响应头、请求方式等

(6)收集 window.performance 下的性能数据,用于计算加载时间

Puppeteer 是 Chrome 团队提供的一个无界面 Chrome 工具,俗称无头浏览器,通过提供的 API 可以控制 Node 端的 Chrome 工具进行指定的操作。在这里设计的性能检测系统中,由于 Lighthouse 进行检测时打开的类似于无痕窗口,没有登录信息,所以 Puppeteer 主要帮助我们实现模拟登录。

当检测页面需要登录时,分析出页面属于哪个 devops 实例,然后通过 Puppeteer 跳转到对应的登录页面,然后输入用户名、密码、验证码,待登录完成后跳转至正确的页面,再进行页面性能检测。如果登录后还在登录页,表示登录失败,则获取错误提示并抛出。

以下是检测系统的一个流程图:

3.2、关键代码

// 开始检测
async run(urlDto: UrlDto): Promise<object> {const start = new Date().getTime();try {const { url, loginUrl } = urlDto;const needLogin = url.includes('devops') || loginUrl;console.log(`本次检测${needLogin ? '' : '不'}需要登录`, url);const runResult = needLogin? await this.withLogin(urlDto): await this.withOutLogin(url);// 保存检测结果文件,便于预览const urlStr = url.replace(/http(s?):\/\//g, '').replace(/\//g, '');fs.writeFileSync(`./static/${urlStr}-report.html`, runResult?.report);// 性能数据const performance = runResult?.lhr?.categories?.performance || {};const data = {...performance,auditRefs: performance?.auditRefs?.filter((item) => item.weight),};// console.log(data);console.log(`本次耗时:${((new Date().getTime() - start) / 1000).toFixed(2)}s`);return {code: 200,data,message: `耗时:${((new Date().getTime() - start) / 1000).toFixed(2)}s`,};} catch (error) {return {code: 401,message: error,};}
}

3.3、检测规则

系统除了支持手动输入网页地址检测,也支持自动检测。为了便于统计每个子产品的真实表现,每天凌晨自动检测 10 次,去掉最高分,去掉最低分,从其余分数中选择中位数作为每天的检测评分。

性能检测时的数据采集可能因为网页服务的不稳定性,导致有偏大或偏小的数据,所以提供某个时间段某个指标的直方图来分析数据的基本特征。也会提供某个产品的整体分数趋势,便于统计某个时间段内该产品的性能变化,也可以提现性能优化前后的效果。

四、写在后面

这篇文章简单介绍了下该性能检测系统的初步设计、一些页面性能的概念以及采用的技术点,后续请关注《搭建自动化 Web 页面性能检测系统 —— 实践篇》。

各位朋友如果有关性能测试的任何问题,欢迎文章后留言,谢谢。

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

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

相关文章

RM3100 stm32驱动(硬件i2c)

目录 RM3100接线HAL库I2C函数HAL_I2C_Mem_ReadHAL_I2C_Mem_WriteHAL_I2C_Master_Transmit / HAL_I2C_Master_Receive例子 HSHAKE寄存器 cubemx配置RM3100寄存器驱动最终效果 RM3100接线 原理图 SA0 SA1接地&#xff0c;此时i2c设备地址为0100000&#xff0c;即0x20 如果SA0接…

Android studio 花式按键

一、activity_main.xml代码&#xff1a; <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.a…

Bug:Too many open files【ulimit限制】

Bug&#xff1a;Too many open files 今天在开发某个下载功能时&#xff0c;发现文件总是下载到250多个程序就挂掉&#xff0c;同时会打崩服务器&#xff0c;查看错误日志发现报&#xff1a;too many open files. 思路&#xff1a;根据错误信息可以知道打开的文件数过多&#x…

001、安装 Rust

目录 1. 安装 Rust 2. 安装编译器 Visual Studio Code 3. 更新、卸载、文档命令 4. 结语 1. 安装 Rust 安装 Rust 非常简单&#xff0c;首先进入 Rust官网 &#xff0c;然后点击右上角的 Install 。 进入 Install 界面&#xff0c; 它会自动识别你当前的操作系统并给你推荐…

HBase基础知识(七):HBase 性能优化示例全解

1. 高可用 在 HBase 中 HMaster 负责监控 HRegionServer 的生命周期&#xff0c;均衡 RegionServer 的负载&#xff0c; 如果 HMaster 挂掉了&#xff0c;那么整个 HBase 集群将陷入不健康的状态&#xff0c;并且此时的工作状态并不会维持太久。所以 HBase 支持对 HMaster 的高…

用C求斐波那契数列-----(C每日一编程)

斐波那契数列: 斐波那契数列是指这样一个数列&#xff1a;1&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;5&#xff0c;8&#xff0c;13&#xff0c;21&#xff0c;34&#xff0c;55&#xff0c;89……这个数列从第3项开始 &#xff0c;每一项都等于前两项之和。 递推…

数据库的连接池详解

什么是数据库连接池&#xff1f; 数据库连接池是一种管理和维护数据库连接的机制&#xff0c;用于提高数据库访问的性能和效率。连接池通过在应用程序启动时创建一组数据库连接&#xff0c;并在需要时将这些连接分配给应用程序&#xff0c;然后在不再需要时将其返回到池中。这…

Kubernetes (四) 资源清单及yaml文件详解

一. 资源清单 二. 编写yaml文件及内容详解 常用命令 …

前端---css 属性

css 作用是美化 HTML 网页和控制页面布局的,下面这些是经常使用的一些样式属性。 1. 布局常用样式属性 width 设置元素(标签)的宽度&#xff0c;如&#xff1a;width:100px;height 设置元素(标签)的高度&#xff0c;如&#xff1a;height:200px;background 设置元素背景色或者…

OSPF多区域配置-新版(12)

目录 整体拓扑 操作步骤 1.基本配置 1.1 配置R1的IP 1.2 配置R2的IP 1.3 配置R3的IP 1.4 配置R4的IP 1.5 配置R5的IP 1.6 配置R6的IP 1.7 配置PC-1的IP地址 1.8 配置PC-2的IP地址 1.9 配置PC-3的IP地址 1.10 配置PC-4的IP地址 1.11 检测R5与PC1连通性 1.12 检测…

Vue3-v-model原理

对比&#xff1a;Vue-2.3v-model原理-CSDN博客 v-model为:modelValue和update:modelValue的简写 表单类组件封装 父组件 <ChannelSelect v-model"cateId"></ChannelSelect> 子组件 <script setup> defineProps({modelValue: {type: [Number,…

人工智能_机器学习076_Kmeans聚类算法_体验_亚洲国家队自动划分类别---人工智能工作笔记0116

我们开始来看聚类算法 可以看到,聚类算法,其实就是发现事物之间的,潜在的关联,把 有关联的数据分为一类 我们先启动jupyter notebook,然后 我们看到这里我们需要两个测试文件 AsiaFootball.txt里面记录了,3年的,亚洲足球队的成绩

java获取两个List集合之间的交集、差集、并集

文章目录 方式一、jdk8 Stream求交集、并集、差集方式二、求交集方式三、collections4.CollectionUtils求交集、差集、并集 本文总结一下java中获取两个List之间的交集、补集、并集的几种方式。 最常用的通过for循环遍历两个集合的方式在这里就不整理了&#xff0c;主要整理一些…

结合el-upload修改支持上传图片、视频并预览

结合element plus的el-upload标签&#xff0c;实现上传图片和视频&#xff0c;并支持在线预览和放大 1、html部分 <el-form-item label"活动照片、视频"><el-uploadv-model:file-list"state.photoList":action"state.uploadUrl"accept…

数据分析——数据预处理和数据管道构建

目标&#xff1a;对于拿到的一个任意数据集&#xff0c;编写类似数据加载程序&#xff0c;以适应深度学习的研究。 框架&#xff1a; 针对不同的时间序列数据集&#xff0c;可以总结如下关键步骤&#xff0c;以编写类似上述代码的深度学习数据处理流程&#xff1a; 1. **了解…

MacOS编译安装PHP5.6

PHP&#xff1a;安装PHP5.6 安装依赖可以省略&#xff0c;缺少哪个装哪个即可&#xff0c;类似linux yum install libxml2 libxml2-devel openssl openssl-devel bzip2 bzip2-devel libcurl libcurl-devel libjpeg libjpeg-devel libpng libpng-devel freetype freetype-deve…

开源低代码开发平台如何在数字化转型中发挥价值?

当前&#xff0c;数字化转型升级是发展潮流&#xff0c;也是很多企业提升市场竞争力&#xff0c;获得更多利润价值的发展路径。作为提质增效的办公利器&#xff0c;开源低代码开发平台也将发挥应有的价值和作用&#xff0c;在推动企业数字化转型和流程化办公的过程中贡献力量&a…

Linux - 记录问题:Ubuntu查看文件夹大小

在Ubuntu中&#xff0c;你可以使用du命令来查看文件夹的大小。du命令的全称是"disk usage"&#xff0c;用于估计和显示目录或文件的磁盘使用空间。 如果你想查看某个特定文件夹的大小&#xff0c;你可以使用以下命令&#xff1a; du -sh /path/to/directory在这个命…

layui表格中预览视频和图片

全代码 <!DOCTYPE html> <html><head><title>Layui&#xff1a;数据表格table中预览图片、视频</title><meta charset"utf-8"/><link rel"stylesheet" href"../dist/css/layui.css"><style>&l…

竞赛保研 基于人工智能的图像分类算法研究与实现 - 深度学习卷积神经网络图像分类

文章目录 0 简介1 常用的分类网络介绍1.1 CNN1.2 VGG1.3 GoogleNet 2 图像分类部分代码实现2.1 环境依赖2.2 需要导入的包2.3 参数设置(路径&#xff0c;图像尺寸&#xff0c;数据集分割比例)2.4 从preprocessedFolder读取图片并返回numpy格式(便于在神经网络中训练)2.5 数据预…