【简单版】通过 Window.performance 实现前端页面(性能)监控
1 背景
前端监控系统告警xx接口fetchError
问题:前端监控系统没有更多的错误信息,查询该fetch请求对应的接口日志返回200状态码、无请求异常记录,且后台能查到通过该fetch请求成功发送的数据。那是前端页面的错误还是前端监控系统的问题?如何证明?
2 思考
在前端测获取页面 fetch 请求信息(通过 Window.performance 访问窗口中运行的代码的性能信息;Window.performance.getEntries()可以拿到 fetch 请求信息,但是拿不到Axios请求信息),然后通过埋点将页面性能信息上报。
3 performance相关知识


4 上代码
- 注意:加try catch
/*** @returns 上报当前页面资源情况*/reportPerformance () {try {const params = {resource: window.performance.getEntries(),network: deepCopy(window.navigator.connection),pagePerformance: window.performance.toJSON(),}if (window.performance?.memory) params.memory = new Memory()return this.report('performance', params)// 调用埋点上报的方法} catch (e) {return this.report('fe_error', { message: e?.message, stack: e?.stack })}}
- 上报的params结果贴出来


fetchStart:返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件在网页查询本地缓存之前发生。
domInteractive:返回当前网页DOM结构结束解析、开始加载内嵌资源时(即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时)的Unix毫秒时间戳。
domContentLoadedEventEnd:返回当前网页所有需要执行的脚本执行完成时的Unix毫秒时间戳。
- 使用示例
- 计算某fetch请求的请求时间:
performance的fetchStart + performance.getEntries()的fetch请求的startTime
new Date(1728720141830 + 726.1000000238419)
- 计算白屏时间(用户看到页面展示出现一个元素的时间):
可以直接采用performance的 domInteractive - fetchStart 获取耗时,此时页面资源加载完成,即将进入渲染环节。

- 计算首屏时间
首屏时间是指页面第一屏所有资源完整展示的时间。这是一个对用户来说非常直接的体验指标,但是对于前端却是一个非常难以统计衡量的指标。可以使用performance的 domContentLoadedEventEnd - fetchStart 获取耗时,此时页面DOM树已经解析完成并且显示内容
参考
MDN - Performance
相关文章:
【简单版】通过 Window.performance 实现前端页面(性能)监控
1 背景 前端监控系统告警xx接口fetchError 问题:前端监控系统没有更多的错误信息,查询该fetch请求对应的接口日志返回200状态码、无请求异常记录,且后台能查到通过该fetch请求成功发送的数据。那是前端页面的错误还是前端监控系统的问题&…...
微信小程序考试系统(lw+演示+源码+运行)
摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了微信小程序考试系统的开发全过程。通过分析微信小程序考试系统管理的不足,创建了一个计算机管理微信小程序考试系统的方案。文章介绍了微信小程序考…...
手机摄影入门
感觉会摄影的人是能够从生活中发现美的人。 我不太会拍照,觉得拍好的照片比较浪费时间,而且缺乏审美也缺乏技巧,所以拍照的时候总是拍不好。但有时候还是需要拍一些好看的照片的。 心态和审美可能需要比较长时间提升,但一些基础…...
微信小程序手机号授权获取(aes加密手机号)
<view class="container"> <view class=topTabSwiper> <view class=tab {{currentData == 0 ? "tabBorer" : ""}} data-current = "0" bindtap=checkCurrent>一键授权<span class="tab_bor"><…...
asyn queueRequest使用实例
使用queueRequest读写端口驱动的示例,驱动驱动程序使用一个基于asyn实现了asynCommon和asynOctet的驱动程序-CSDN博客中编写的驱动程序,本程序的C代码如下: #include <stdlib.h> #include <stdio.h> #include <string.h>#…...
关于jmeter设置为中文问题之后无法保存设置的若干问题
1、jemeter如何设置中文模式 Options--->Choose Language--->Chinese(Simplifies), 如此设置后就可显示中文模式(缺点:下次打开还是英文);如下图所示: 操作完成之后: 但是下次重启之后依旧是英文; 2、在jmeter.…...
基于FPGA的信号发生器verilog实现,可以输出方波,脉冲波,m序列以及正弦波,可调整输出信号频率
目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 输出方波 输出脉冲波 输出m随机序列 输出正弦波 2.算法运行软件版本 vivado2019.2 3.部分核心程序 (完整…...
背景全文及翻译
背景 Oracle数据向MySQL同步,没有最新数据,于是在plsql手敲SQL筛选最新数据时,执行报错。 问题描述 通过日期字段筛选最近的数据,我用了类似这样的语句: SELECT * FROM orders WHERE order_date > 2022/01/01;我…...
JAVA地狱级笑话
为什么Java开发者总是不怕黑暗? 因为他们总是有null指针来照亮路。 Java程序员最讨厌的音乐是什么? Garbage Collection旋律,节奏总是让他们烦躁。 为什么Java中的HashMap很擅长社交? 因为它总是能快速找到key对应的朋友。 Java开…...
宝塔PHP8.1安装fileinfo拓展失败解决办法
在宝塔面板中安装PHP8.1后,安装fileinfo扩展一直安装不上,查看日志有报错,于是手动来安装也报错。 宝塔报错: 手动命令行编译安装同,也有报错 cd /www/server/php/81/src/ext/fileinfo/ make distclean ./configure …...
Python 魔术方法
在Python中,魔术方法(Magic Methods)或称为双下划线方法(Dunder Methods),是一类具有特殊用途的方法,其名称前后都带有两个下划线(如 __init__、__str__ 等)。这些方法定…...
03 go语言(golang) - fmt包基本类型
fmt包 在Go语言中,fmt 包是一个非常重要且广泛使用的标准库包,它提供了格式化I/O(输入/输出)功能,类似于C语言中的 printf 和 scanf。通过这个包,你可以读取输入并将数据格式化输出到标准输出或其他写入器…...
Docker本地镜像发布到阿里云镜像服务的简易指南
1 阿里云容器镜像服务 阿里云容器镜像服务(Alibaba Cloud Container Registry,简称ACR)是一个为容器镜像、Helm Chart等云原生资产提供安全托管及高效分发的平台。它支持多架构容器镜像,包括Linux、Windows、ARM等,以…...
大数据学习---快速了解clickhouse数据库
ClickHouse数据库介绍 ClickHouse是一款由Yandex开发的列式数据库管理系统(DBMS),适用于在线分析处理(OLAP)场景。它具有高性能、可扩展性、实时更新等特点,适用于处理大规模数据。 特点 列式存储&#x…...
哪些方法可以缓解面试紧张?
面试紧张是许多人在面对重要职业机会时的一种常见情绪。虽然一定程度的紧张可能激发人的潜能,但过度的紧张则可能影响到面试表现。为了缓解面试紧张,以下是一些有效的方法: 1.充分准备: 深入了解公司背景、职位要求以及公司文化…...
即时通讯未读消息计数
单聊未读消息计数 未读消息的计数,分为两个部分:增加和减少 其中,未读消息计数的增加,是由数据库(redis)在写入消息的同时,增加对应接收方的未读消息计数 在线 用户在线时,客户端…...
在Openshift(K8S)上通过EMQX Operator部署Emqx集群
EMQX Operator 简介 EMQX Broker/Enterprise 是一个云原生的 MQTT 消息中间件。 我们提供了 EMQX Kubernetes Operator 来帮助您在 Kubernetes 的环境上快速创建和管理 EMQX Broker/Enterprise 集群。 它可以大大简化部署和管理 EMQX 集群的流程,对于管理和配置的知…...
Python酷玩之旅_数据分析入门(matplotlib)
导览 前言matplotlib入门1. 简介1.1 Pairwise data1.2 Statistical distributions1.3 Gridded data1.4 Irregularly gridded data1.5 3D and volumetric data 2. 实践2.1 安装2.2 示例 结语系列回顾 前言 翻看日历,今年的日子已划到了2024年10月19日,今天…...
uiautomatorviewer安卓9以上正常使用及问题处理
一、安卓9以上使用uiautomatorviewer问题现象 打开Unexpected error while obtaining UI hierarchy 问题详情 Unexpected error while obtaining UI hierarchy java.lang.reflect.InvocationTargetException 二、问题处理 需要的是替换对应D:\software\android-sdk-windows…...
Go语言gRPC快速入门
文章目录 前言gRPC是什么Go语言的gRPC技术栈准备工作接口定义代码生成服务端代码编写客户端代码编写效果演示完整代码链接最后 前言 你好,我是醉墨居士,这篇博客想帮助初学者能够快速入门gRPC,希望能够为你节省宝贵的时间,让时间…...
AHT20传感器数据不准?可能是你的CRC校验没做对!一个真实案例的排查与修复
AHT20传感器数据异常?CRC校验可能是你忽略的关键环节 当你在嵌入式项目中集成AHT20温湿度传感器时,是否遇到过数据偶尔跳变或明显失真的情况?这个问题困扰过不少开发者,而解决方案往往藏在一个容易被忽视的细节里——CRC校验。让我…...
SSM学习之使用@ResquestBody注解处理json格式的请求参数
在学习ajax异步请求的时候,如果通过post请求发送json格式的请求参数,服务端是无法通过request.getParameter()方法获取请求参数的。那么在ssm学习过程中,我学到了一个处理json格式的请求参数的注解RequestBody。它的作用是将请求体中的内容和…...
Small插件化框架的终极持续集成指南:如何自动化构建和发布插件
Small插件化框架的终极持续集成指南:如何自动化构建和发布插件 【免费下载链接】Small A small framework to split app into small parts 项目地址: https://gitcode.com/gh_mirrors/smal/Small Small插件化框架是一款轻量级、跨平台的插件化解决方案&#…...
Kali与编程・暴力破解・大白话版(超好懂)
大家好,我是 Kali 与编程讲师老 K,B 站和网易云课堂讲师,致力于帮助小白轻松学会 Kali 与编程,接下来你将搞懂什么是《暴力破解》。 暴力破解,说白了就是用程序自动不停地试密码,一个一个试,直…...
NaViL-9B多场景落地:物流运单图像识别+地址结构化+异常标记
NaViL-9B多场景落地:物流运单图像识别地址结构化异常标记 1. 物流行业的AI变革机遇 现代物流行业每天处理数以亿计的运单,传统人工处理方式面临三大挑战: 效率瓶颈:人工录入一张运单平均耗时30秒,高峰期处理能力不足…...
4.VLAN 技术:二层网络的优化之道
一、网络发展的困境与挑战(一)早期网络的冲突域问题在网络发展的早期阶段,设备的数据传输共享同一物理介质,就如同多辆车需要共用一条单车道上通行。当多个设备同时尝试传输数据时,数据信号就会彼此竞争、干扰…...
知识点1:ROS文件系统
学习资源为Autolabor教程一、ROS文件系统指ROS源码文件存储在硬盘中的形式。相当于文件结构WorkSpace --- 自定义的工作空间|--- build:编译空间,用于存放CMake和catkin的缓存信息、配置信息和其他中间文件。|--- devel:开发空间,用于存放编译后生成的目…...
我需要开发出一个检测手机移动的算法来
1 用GPS2 运动传感器3 其他传感器就是真正能100%不会误报,而且精度达到:只要移动距离超过1米就要报警的那种。挂在树上面即使手机不停在转动也不会误报后来发现:只需要一个位移检测算法就可以了。...
Qwen-Image镜像实测:RTX4090D+120G内存,图文理解快到飞起
Qwen-Image镜像实测:RTX4090D120G内存,图文理解快到飞起 1. 开箱即用的高性能推理环境 当我第一次启动这个专为RTX 4090D优化的Qwen-Image镜像时,最直观的感受就是"快"。在120GB内存的支持下,大模型加载过程几乎没有任…...
鼎捷T100程序开发实战:从核心类型到高效开发全解析
1. 鼎捷T100程序开发入门指南 第一次接触鼎捷T100系统开发时,我被它复杂的架构搞得晕头转向。记得当时接到一个采购单维护的需求,连最基本的程序类型都分不清楚,结果在开发过程中反复修改了好几次。经过这些年的实战,我总结出一套…...
