腾讯云可观测平台 性能监控

这篇说说腾讯云前端性能监控(RUM)的页面测速、接口测速、资源测速、卡顿监控和内存监控的统计方式与配置方法,涵盖默认指标、开启方式和配置项说明。 页面测速:默认上报DNS查询、TCP连接、首屏耗时等9项指标,并绘制加载瀑布图。 卡顿监控:基于PerformanceObserver检测长任务,支持自定义卡顿(默认2秒)与无响应(默认5秒)阈值。 内存监控:定时上报JS内存使用并检测OOM,可配置上报间隔与OOM阈值。

相关产品
腾讯云可观测平台 产品页,含版本规格、价格与购买入口。

你可以通过这篇了解页面测速、接口测试、资源测速的统计方式和传入配置等信息。

一、页面测速

注意:说明:

注意:RUM 默认为你开启页面测速功能。

当你成功安装和初始化 SDK 后,Aegis 实例默认会上报以下指标:

1. DNS 查询:domainLookupEnd – domainLookupStart;

2. TCP 连接:connectEnd – connectStart;

3. SSL 建连:requestStart – secureConnectionStart;

4. 请求响应:responseStart – requestStart;

5. 内容传输:responseEnd – responseStart;

6. 内容解析:domInteractive – domLoading;

7. 资源加载:loadEventStart – domInteractive;

8. 首屏耗时:监听页面打开3s内的首屏 DOM 变化,并认为 DOM 变化数量最多的那一刻为首屏框架渲染完成时间(SDK 初始化后 setTimeout 3s 收集首屏元素,由于 JS 是在单线程环境下执行,收集时间点可能大于 3s);

9. LCP:最大内容渲染时间,从谷歌 Web Vitals 指标中采集。

注意:说明:

注意:1-7 项页面打开性能指标计算说明可从 PerformanceTiming 获取。首屏耗时对应的 DOM 元素,可以通过打印 aegis.firstScreenInfo 查看。如果 DOM 元素不能代表首屏,可以添加属性<div aegis-first-screen-timing></div>,把某个元素识别为首屏关键元素,SDK 认为只要用户首屏出现此元素就是首屏完成。也可以添加属性<div aegis-ignore-first-screen-timing></div>,把该 DOM 列入黑名单。

根据以上数据,前端性能监控为用户绘制了页面加载瀑布图:

注意:说明:

二、接口测速

注意:说明:

注意:打开方式:初始化时传入配置 reportApiSpeed: true

Aegis 通过劫持 XHR 及 fetch 进行接口测速。

三、资源测速

注意:说明:

注意:打开方式:初始化时传入配置 reportAssetSpeed: true

Aegis 通过浏览器提供的 PerformanceResourceTiming 进行资源测速。

四、卡顿监控

注意:说明:

注意:打开方式: 初始化时传入配置 lagMonitor: { enabled: true }

Aegis 卡顿监控基于浏览器的 PerformanceObserver API 和 long-animation-frame 类型,能够精准检测页面中的长任务和无响应事件。

五、监控类型

类型 默认阈值 说明
卡顿事件 2-5秒 检测超过阈值的长任务,影响用户体验
无响应事件 大于5秒 检测严重的页面阻塞,用户无法操作

开启卡顿监控功能后,可以在 页面性能 页面中看到卡顿率指标:

同时,日志页面中也可以看到对应的卡顿事件进行分析:

注意:说明:

注意:卡顿事件中的 sourceURL 和 invoker 字段可能显示为 unknown,这是由于浏览器 API 的限制,非 SDK 问题。

六、配置项说明

卡顿监控所有配置项说明如下:

export interface LagMonitorConfig { // 是否启用卡顿监控 enabled?: boolean; // 卡顿阈值,单位ms,默认2000ms threshold?: number; // 无响应阈值,单位ms,默认5000ms noResponseThreshold?: number;}

使用示例:

const aegis = new Aegis({ id: 'your-project-id', lagMonitor: { enabled: true, threshold: 2000, // 默认阈值 noResponseThreshold: 5000, // 关注严重阻塞 },});

七、内存监控

注意:说明:

注意:打开方式: 初始化时传入配置 memoryMonitor: { enabled: true }

内存监控插件用于监控 Web 页面的 JavaScript 内存使用情况,支持定时上报和 OOM(内存溢出)检测。

内存监控所有配置项说明如下:

export interface MemoryMonitorConfig { // 是否启用内存监控 enabled?: boolean; // 是否启用内存定时上报,默认 true enableMemoryReport?: boolean; // 是否启用 OOM 检测上报,默认 true enableOOMReport?: boolean; // OOM 阈值,单位MB,默认为设备内存上限的90% oomThreshold?: number; // 内存定时上报间隔,单位ms,默认60000ms(1分钟) memoryReportInterval?: number; // OOM 检测间隔,单位ms,默认10000ms(10秒) oomCheckInterval?: number;}

使用示例:

const aegis = new Aegis({ id: 'your-project-id', memoryMonitor: { enabled: true, enableMemoryReport: true, // 开启定时上报 enableOOMReport: true, // 只开启 OOM 检测 oomThreshold: 2000, // 自定义阈值2000MB oomCheckInterval: 10000, // 每10秒检测一次 },});

赞 (0)
上一篇 4天前
下一篇 4天前