性能监控体系
前端性能监控体系：实验室数据、真实用户监控 RUM、业务埋点联动。
#type / concept
#status / evergreen
#tech / dev / frontend
[!info] related notes
- 所属 MOC: 前端性能优化 MOC
- 前置概念: performance-metrics-system
- 并列概念: performance-budget, 埋点
- 关系笔记: 前端埋点工程化
性能监控体系
一句话定义
性能监控体系是”先定义指标、再定位瓶颈、再做优化、再验证收益”的闭环基础设施，分实验室数据、真实用户监控、业务埋点联动三层。
核心内容
第一层：实验室数据
在开发/测试环境压测，适合发现结构性问题。
| 工具 | 用途 |
|---|---|
| Lighthouse | 综合性性能评分与优化建议 |
| DevTools Performance | 火焰图分析、帧率、耗时拆解 |
| WebPageTest | 多地域、多设备、多网络环境测试 |
第二层：真实用户监控（RUM）
采集线上用户真实数据，知道”真实用户到底慢不慢”。
采集数据：
- 首屏耗时、LCP、INP、CLS
- 页面错误率
- 接口耗时、成功率
- 路由切换耗时
- 白屏时间
- 机型分布、地区网络分布
第三层：业务埋点联动
把性能指标和业务结果结合。
- 慢页面转化率是否更低
- 某机型是否异常卡顿
- 某地区弱网下是否流失更严重
- 慢请求是否导致用户放弃操作
它和埋点的边界
- RUM 是前端观测体系的一部分，更关心真实用户体验是否健康
- 行为埋点更关心用户做了什么、在哪一步流失、哪些行为产生了业务结果
- 两者经常共用 SDK 或上报链路，但分析目标并不完全一样
边界与易混淆点
实验室数据 vs 真实用户数据
- 实验室数据：网络稳定、设备高端、可控
- 真实用户数据：网络复杂、设备多样、真实场景
- 两者都需要，实验室用于结构验证，RUM 用于真实评估
性能优化第一原则
没有监控的优化，很容易变成”感觉优化”。
真正系统的做法：
- 先基线测试
- 找最重的瓶颈
- 优化单点
- AB 对比
- 看是否真实收益