要通过 Performance API 实现实时性能告警，关键在于构建指标采集、阈值判断、上报与响应的闭环，依赖精准打点、即时判断和可靠触达三要素。
要通过 Performance API 实现实时性能告警，关键不是等数据攒够再分析，而是让指标采集、阈值判断、上报与响应形成闭环。它依赖三件事：精准打点、即时判断、可靠触达。
一、用 PerformanceObserver 实时捕获关键指标
别再轮询 performance.getEntries()，改用观察者模式监听“一出现就告警”的事件：
- 监控 LCP 超时（如 >2.5s）：
new PerformanceObserver(list => {<br> list.getEntries().forEach(e => {<br> if (e.startTime > 2500) reportAlert('LCP_TOO_SLOW', e);<br> });<br>}).observe({ type: 'largest-contentful-paint', buffered: true }); - 同样方式监听 FID > 100ms、CLS > 0.1、FCP > 1.8s 等 Core Web Vitals 指标
- 对长任务（
longtask）也开启监听，单个任务 > 50ms 就可视为卡顿风险
二、在业务关键路径中嵌入可告警的自定义标记
用户点击搜索 → 接口返回 → 列表渲染完成，这个链路必须可量化、可告警：
- 在 click 回调开头打
performance.mark('search_start')；接口 resolve 后打performance.mark('search_api_done')；列表 DOM 渲染完毕再打performance.mark('search_ui_ready') - 立刻 measure：
performance.measure('search_total', 'search_start', 'search_ui_ready') - 获取结果后立即判断：
const m = performance.getEntriesByName('search_total', 'measure')[0];<br>if (m && m.duration > 3000) reportAlert('SEARCH_TIMEOUT', m);
三、告警触发必须绕过页面生命周期限制
告警不是“记录日志”，而是确保研发能收到——不能依赖 fetch 或 xhr，它们在页面卸载时会被终止：
- 统一使用
navigator.sendBeacon('/api/alert', JSON.stringify(alertData)) - payload 控制在 64KB 内，只传关键字段：指标名、耗时、URL、设备类型、采样标识
- 对非紧急告警（如低频慢资源），可加简单频控：同一 URL + 指标组合 5 分钟内最多上报 1 次
四、告警不是终点，要直连研发动作
真正的实时告警系统，会把前端异常直接转化为可操作项：
- 上报时带上当前 Git commit hash 或构建版本号，便于快速定位变更
- 在 alert payload 中包含
performance.getEntriesByType('navigation')[0]的完整快照，辅助复现网络/重定向问题 - 服务端收到后，自动创建飞书/钉钉消息，@对应模块负责人，并附带跳转到该 URL 的调试链接
