搭建自动化 Web 页面性能检测系统 —— 设计篇
页面性能对于用户体验、用户留存有着重要影响,当页面加载时间过长时,往往会伴随着一部分用户的流失,也会带来一些用户差评。性能的优劣往往是同类产品中胜出的影响因素,也是一个网站口碑的重要评判标准。
一、名称解释
前端监控一般分为合成监控和真实用户监控。
1.1、合成监控
合成监控就是模拟用户的使用场景,访问一个页面,通过一些工具和规则去检测页面,提取一些性能指标,生成一份检测报告,注重检测。
合成监控的优缺点:
优点 | 缺点 |
---|---|
实现简单,社区方案成熟 | 配置复杂,不能完全还原用户真实场景 |
能采集到更丰富的数据 | 登录等场景需要单独处理 |
不影响真实用户的页面访问性能 | 单次检测数据不够准确 |
1.2、真实用户监控
真实用户监控是指用户在页面上访问,访问时会产生各类性能数据,在用户访问停止的时候,将这些性能数据传输到服务端,进行数据整理分析的过程,注重监控。
真实用户监控的优缺点:
优点 | 缺点 |
---|---|
完全还原用户真实场景 | 对用户的访问性能有一定影响 |
登录等场景无需单独解决 | 无法采集完整的资源加载瀑布图 |
数据样本足够大且真实,数据价值高 | 无法可视化展示页面加载过程 |
1.3、定义合适的性能指标
- 首次内容渲染时长(First Contentful Paint, FCP)
页面最新出现的内容渲染时长 - 首次展现平均值(Speed Index, SI)
页面内容可见填充的速度 - 最大内容绘制时间(Largest Contentful Paint, LCP)
页面核心内容呈现时间,不采用 loading 状态的数据 - 可交互时间(Time to Interactive, TTI)
用户是否会体验到卡顿 - 总阻塞时间(Total Blocking Time, TBT)
主线程被阻塞的时间,无法作出输入响应 - 累计布局样式偏移(Cumulative Layout Shift, CLS)
二、为什么做
基于需要对公司的 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 页面性能检测系统 —— 设计篇
页面性能对于用户体验、用户留存有着重要影响,当页面加载时间过长时,往往会伴随着一部分用户的流失,也会带来一些用户差评。性能的优劣往往是同类产品中胜出的影响因素,也是一个网站口碑的重要评判标准。 一、名称解释 前端监控…...
记一次 mysql 数据库定时备份
环境:Centos 7.9 数据库:mysql 8.0.30 需求:生产环境 mysql 数据(约670MB)备份。其中存在大字段、longblob字段 参考博客:Linux环境下使用crontab实现mysql定时备份 - 知乎 一、数据库备份 1. 备份脚本。创…...
淘宝分布式文件存储系统(一) -TFS
淘宝分布式文件存储系统( 一 ) ->>TFS 目录 : 什么是文件系统文件存储的一些概念文件的结构系统读取文件的方式为什么采用大文件结构的原因 文件系统 : 将我们的数据整合成目录或者文件,提供对文件的存取接口,基于文件的权限进行访问,简单的说,文件系统就是对文件进行…...
LLM各层参数详细分析(以LLaMA为例)
网上大多分析LLM参数的文章都比较粗粒度,对于LLM的精确部署不太友好,在这里记录一下分析LLM参数的过程。 首先看QKV。先上transformer原文 也就是说,当h(heads) 1时,在默认情况下, W i Q W_i…...
linux ansible(三)
ansible 配置详解 3.1 ansible 安装方式 ansible安装常用两种方式,yum安装和pip程序安装 3.1.1 使用 pip(python的包管理模块)安装 需要安装一个python-pip包,安装完成以后,则直接使用pip命令来安装我们的ansible包 …...
Anaconda和Pycharm详细安装 配置教程
Anaconda:是一个开源的Python发行版本,其中包含了conda、Python等180多个科学包及其依赖项。【Anaconda下载】 PyCharm:PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具。【PyCharm下载】…...
利用Linux虚拟化技术实现资源隔离和管理
在现代计算机系统中,资源隔离和管理是非常重要的,特别是在多租户环境下。通过利用Linux虚拟化技术,我们可以实现对计算资源(如CPU、内存和存储)的隔离和管理,以提供安全、高效、稳定的计算环境。下面将详细…...
12基于MATLAB的短时傅里叶变换( STFT),连续小波变换( CWT),程序已调通,可以直接运行。
基于MATLAB的短时傅里叶变换( STFT),连续小波变换( CWT),程序已调通,可以直接运行...
k8s使用时无法ping通服务器From IP地址 icmp_seq=1 Destination Host Unreachable
天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…...
两种风格的纯CSS3加载动画
<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>加载动画</title><style>.loader {w…...
Spring Cloud Eureka:服务注册与发现
💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! Spring Cloud Eureka:服务注册与发现 Spring Cloud Eureka是Spring Cloud生态系统中的一个组件,它是用于实现服务注册与发现的服务治理组件。在…...
安防监控视频云存储平台EasyNVR对接EasyNVS时,一直不上线该如何解决?
视频安防监控平台EasyNVR可支持设备通过RTSP/Onvif协议接入,并能对接入的视频流进行处理与多端分发,包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等多种格式。 近期有用户在使用安防视频平台EasyNVR对接上级平台EasyNVS时,出现了一直不上线…...
【完美解决】GitHub连接超时问题 Recv failure: Connection was reset
问题: 已经开了梯子但是在Idea中使用git(GitHub)还是连接超时Recv failure: Connection was reset。此时需要让git走代理。 解决方案: 1.对右下角网络点击右键 -> 打开网络和Internet设置 2.代理 -> 查看到地址和端口号…...
cpolar内网穿透
1、下载地址 https://www.cpolar.com/ windows系统可以在cpolar官网下载最新的安装包,然后解压默认安装即可。 2、地址配置 创建隧道映射内网端口,双击安装的软件,即可进入浏览器配置界面 http://localhost:9200/#/dashboard cpolar安装…...
go语言操作数据库
1.10 GO连接MySQL 因为Go语言没有提供任何官方数据库驱动,所以需要安装第三方函数库。由于在github上安装,所以需要安装git软件,安装过程一直点击下一步即可。安装完成后需要配置环境变量 1.10.1 安装git git软件 安装完毕后,配…...
zabbix实现钉钉报警
首先钉钉创建一个团队 自定义关键词 查看zabbix-server脚本存放的位置: [rootcontrolnode ~]# grep ^AlertScriptsPath /etc/zabbix/zabbix_server.conf AlertScriptsPath/usr/lib/zabbix/alertscripts zabbix server设置 在配置文件书写脚本目录vim /etc/za…...
基于微信小程序的语言课学习系统设计与实现(源码+lw+部署文档+讲解等)
前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌💗 👇🏻…...
R 语言画图中英文字体解决方案
在某些时候,需要在 R 画图中添加中文,但是默认情况下,R 对中文的支持不好。这里推荐一个 showtext 的 R 包。如果需要将含有中文字体的图形保存为 pdf 文件,可以使用下面讲到的方案,最新版的showtext已经支持了 ggplot…...
Golang反射相关知识总结
1. Golang反射概述 Go语言的反射(reflection)是指在运行时动态地获取类型信息和操作对象的能力。在Go语言中,每个值都是一个接口类型,这个接口类型包含了这个值的类型信息和值的数据,因此,通过反射&#x…...
go语言初学(备忘)
1、安装 2 路径配置 C:\Program Files\Go\bin 3新建一个工程 4、下载VSCode 并安装插件 创建一个调试文件 在main目录下新建一个test.go脚本 package main import "fmt" func main() { fmt.Println("Hi 1111") fmt.Println("testasdf") } 断点…...
免费获取独立ChatGPT账户!!
GPT对于每个科研人员已经成为不可或缺的辅助工具,不同的研究领域和项目具有不同的需求。如在科研编程、绘图领域:1、编程建议和示例代码: 无论你使用的编程语言是Python、R、MATLAB还是其他语言,都可以为你提供相关的代码示例。2、数据可视化…...
4.docker容器编排(docker compose 与 docker swarm)
本文目录 1.容器编排2.Docker Compose1.Docker Compose 安装2.Docker Compose 示例1.使用 docker-compose 启动 nginx2.docker compose 常用命令3.校验 docker-compose.yml 是否有错误4.创建服务,启动容器5.弹性伸缩<扩缩容> 3.Docker Swarm1.Swarm 架构图2.S…...
Linux中配置sudo用户访问权限
一、如何在 Linux 中配置 sudo 的访问权限 1.1、添加一个Linux普通用户有 sudo 权限 [root@localhost ~]# useradd test // 创建一个普通用户为:test [root@localhost ~]# [root@localhost ~]# passwd test // 设置用户test密码为:test Changing password for user te…...
ASfP: 增强AOSP平台开发的利器——Android Studio for Platform
ASfP: 增强AOSP平台开发的利器——Android Studio for Platform Android Studio for Platform (ASfP) 是一个为使用 Soong 构建系统构建的 Android 开源项目(AOSP)平台开发者而设计的 Android Studio IDE 版本。与标准 Android Studio 不同,…...
【Html】用CSS定义咖啡 - 咖啡配料展示
显示效果 代码 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>CodePen - For The Love Of Coffee</title><link rel"stylesheet" href"./style.css">&l…...
Learn Prompt-Prompt 高级技巧:AutoGPT
AutoGPT 是一个由Toran Richards创建的流行开源项目。它利用GPT4作为大脑,结合langchain的链接思想,连接各种工具和互联网资源,来完成人类给予的任务。您只需要设定一个目标,AutoGPT就会自主规划并逐步执行任务。如果遇到问题&…...
IntelliJ IDEA - Maven 在控制台Maven编译正常,但是在IDEA中不正常,表现不一致
文章目录 现象原因解决验证 现象 一个Maven项目,当导入到IDEA后,无法在IDEA中正常的编译和下载jar依赖,类似下面的截图。 但是在Windows控制台却可以正常编译,类似下面的截图。 CMD执行:mvn clean install -Dmaven.te…...
list 用法与模拟
list 用法 list list 模拟 #pragma once #include <assert.h> namespace sjy {//链表节点template <typename T>struct __list_node{__list_node(const T& val T()):_prev(nullptr),_next(nullptr),_val(val){}/*成员变量*/__list_node<T>* _prev;__…...
【操作系统笔记】进程和线程
进程的组成 进程要读取 ELF 文件,那么: ① 要知道文件系统的信息,fs_struct② 要知道打开的文件的信息,files_struct 一个进程除了需要读取 ELF 文件外,还可以读取其他的文件中的数据。 进程中肯定有一个 mm_struct…...
一短文读懂编译型与解释型编程语言
在编程世界中,我们经常听到编译型语言和解释型语言这两个术语。它们是什么,有什么区别呢?让我们一起来探讨一下。 编译型语言 编译型语言,如C、Java等,是一种需要先被编译成机器代码,然后才能被执行的语言…...
约小姐的微信小程序是什么/百度关键词排名优化
Prism框架对象DelegateCommand 1、常规命令支持 2、泛型命令支持 3、事件命令支持 4、事件聚合器-》Messenger(事件订阅发布) 定义一个基本消息类型,继承PubSubEvent 5、复合命令<prism:PrismApplication x:Class="Zhaoxi.PrismLesson.App"xmlns="http:/…...
建设一个网站的意义/百度一下你就知道官页
众所周知,WordPress一直都是博客建站的首选程序,而现在也有越来越多的企业网站都选择采用WordPress来搭建。 WordPress虽好但其过于臃肿且响应速度慢等缺点也为站长们所诟病,目前网上介绍为WordPress加速的方法五花八门,各有各的优…...
医疗行业网站备案/清远今日头条新闻
摘要 mongo 的索引非常强大,和关系型数据库索引没什么区别。这里主要介绍mongo索引基本知识和mongo本人在索引上的犯的错。 索引种类 单字段索引 复合索引 复合索引各个字段的顺序应该是精确匹配字段(xxx),排序字段(避免在内存中排序,使用index排序)&am…...
网页托管网站/百度一下官方网
交通运输业是否属于现代服务业交通运输业是指使用运输工具将货物或者旅客送达目的地,走其空同位置得到转移的业务活动.包括陆路运输服务、水路运输服务、航空运输服务和管道运输服务.属于服务业,服务业视同为第三产业.交通运输、仓储和邮政业信息传输、计算机服务和软件业批发和…...
大型网站建设流程/网络服务器
1. 一条数学公式:如果有 a%bc, 则有 (akb)%bc(k 为非零整数) 2. 用途:求解一次线性同余方程组,需要将模数转化为素数来求解的题目 3. 核心:求 (N/mi)∗yi≡1(mod mi) 中的yi --》 扩展欧几里得 --》 看成 yi(N/m1)q⋅m11 &#…...
新网站建设需要什么/建站平台在线提交功能
开篇的话 在比较老的编译器里,如果没有对变量取地址的操作,那么有些局部变量是通过寄存器保存的,不占栈上内存,根本不存在内存中如何排列的问题,比如TurboC 2.0这种。 在一些较新的编译器里,局部变量排列顺…...