← [ BACK_TO_NOTES ]

性能监控体系

前端性能监控体系：实验室数据、真实用户监控 RUM、业务埋点联动。

#synthesis #evergreen #frontend

[!info] related notes

所属 MOC: 前端性能优化 MOC

前置概念: performance-metrics-system

并列概念: performance-budget, 埋点

关系笔记: 前端埋点工程化

性能监控体系

一句话定义

性能监控体系是”先定义指标、再定位瓶颈、再做优化、再验证收益”的闭环基础设施，分实验室数据、真实用户监控、业务埋点联动三层。

核心内容

第一层：实验室数据

在开发/测试环境压测，适合发现结构性问题。

工具	用途
Lighthouse	综合性性能评分与优化建议
DevTools Performance	火焰图分析、帧率、耗时拆解
WebPageTest	多地域、多设备、多网络环境测试

第二层：真实用户监控（RUM）

采集线上用户真实数据，知道”真实用户到底慢不慢”。

采集数据：

首屏耗时、LCP、INP、CLS
页面错误率
接口耗时、成功率
路由切换耗时
白屏时间
机型分布、地区网络分布

第三层：业务埋点联动

把性能指标和业务结果结合。

慢页面转化率是否更低
某机型是否异常卡顿
某地区弱网下是否流失更严重
慢请求是否导致用户放弃操作

它和埋点的边界

RUM 是前端观测体系的一部分，更关心真实用户体验是否健康
行为埋点更关心用户做了什么、在哪一步流失、哪些行为产生了业务结果
两者经常共用 SDK 或上报链路，但分析目标并不完全一样

边界与易混淆点

实验室数据 vs 真实用户数据

实验室数据：网络稳定、设备高端、可控
真实用户数据：网络复杂、设备多样、真实场景
两者都需要，实验室用于结构验证，RUM 用于真实评估

性能优化第一原则

没有监控的优化，很容易变成”感觉优化”。

真正系统的做法：

先基线测试
找最重的瓶颈
优化单点
AB 对比
看是否真实收益

学习检查

不看正文回答：

Lab、RUM、业务埋点分别回答什么问题，为什么三者不能互相替代？
为什么 Lighthouse 很好看仍不能证明真实用户体验健康？
RUM 中至少应该保留哪些环境维度，才能解释“谁慢、在哪里慢”？
为什么性能监控必须和性能指标体系分开理解？
一个优化完成后，怎样用 baseline → change → comparison 证明收益，而不是凭感觉？
给一个“部分地区 LCP 明显变差”的案例，说明你会怎样从监控数据缩小范围。