监控指标与问题排查

整理 性能指标、量化工具、线上监控思路、页面慢的排查步骤，并附常见问答提要。

1. 实验室 vs 真实用户

类型	工具/数据来源	用途
实验室	Lighthouse、本地 Performance	可重复、适合迭代对比
RUM（真实用户）	自建埋点、Sentry Web Vitals、商业化 APM	反映真实网络与设备

2. 常用指标（简表）

指标	关注点
FCP	首次内容绘制
LCP	最大内容绘制，常与图片、字体、SSR、路由有关
INP	交互响应，常与长任务、主线程阻塞有关
CLS	布局稳定性，常与无尺寸图片、异步插入广告有关
TTFB	首字节时间，偏后端与网络

3. 页面「打开很慢」排查顺序（建议）

Network：看 HTML/TTFB、是否阻塞资源过大、是否过多串行请求。
Coverage / 打包分析：JS/CSS 是否远超首屏需要。
Performance 录制：Main 线程长任务、布局抖动、频繁 GC。
Lighthouse：给出分类分数与可操作建议（需结合实际栈筛选）。
线上：分地域、分设备、分版本对比，避免本地假象。

4. 常见问答（极简）

你做过哪些优化？ 按 网络 → 渲染 → 资源 → 运行时 → 框架 选 2～3 条有数据支撑的实例回答。
首屏慢？ 先看 LCP 元素与 关键请求瀑布，再谈分包、SSR、图片与缓存。
长列表卡？ 虚拟列表 + 减少字段渲染 + 避免在滚动回调里重逻辑。
如何看监控？ 建立 LCP/INP/CLS 分位数与样本量，异常告警与版本关联。

小结

优化闭环：指标定义 → 采集 → 分桶分析 → 改动 → 回归对比。本目录 01～06 为手段库，本篇为 何时用、如何证。