JavaScript中可通过PerformanceObserver监控自定义性能指标，需先用performance.mark()打点、performance.measure()计算耗时，再注册监听"measure"类型条目并按名称、duration等过滤上报，注意兼容性及手动disconnect清理。
JavaScript中可以通过 PerformanceObserver 监控自定义性能指标，核心在于结合 performance.mark() 和 performance.measure() 打点，并注册观察器监听 "measure" 类型的条目。
注册 PerformanceObserver 监听 measure 类型
自定义指标通常以 measure 形式上报，因此需在创建观察器时指定 { type: "measure" }：
- 使用
entryTypes: ["measure"]显式声明关注类型（推荐） - 回调函数中通过
entries.getEntries()获取所有匹配的测量记录 - 可多次调用
observe()添加不同过滤条件，但同一 observer 实例只需注册一次
打点：mark + measure 构成可追踪的自定义指标
先用 performance.mark() 标记关键时间点，再用 performance.measure() 计算两点间耗时，该耗时即为一条自定义指标：
-
performance.mark("api-start")—— 请求发起前 -
performance.mark("api-end")—— 响应到达后 -
performance.measure("fetch-user-time", "api-start", "api-end")—— 生成名为"fetch-user-time"的 measure 条目 - measure 名称会作为
entry.name出现在 observer 回调中，便于分类和上报
上报与过滤：按名称或属性做轻量处理
在 observer 回调中，可对 measure 条目做实时判断，只上报关心的指标：
立即学习“Java免费学习笔记（深入）”；
- 检查
entry.name是否匹配预设前缀（如"ui-"、"api-"） - 读取
entry.duration判断是否超阈值，触发告警或日志 - 结合
entry.detail（需手动传入）携带额外上下文，例如接口路径、用户ID等 - 避免在回调中执行重操作（如发网络请求），建议节流或存入队列异步上报
兼容性与清理注意事项
PerformanceObserver 在现代浏览器中支持良好（Chrome 60+、Firefox 57+、Safari 13.1+），但需注意：
- IE 完全不支持，需降级方案（如仅用
performance.now()手动计时） - observer 实例需手动
.disconnect()，否则可能造成内存泄漏（尤其在单页应用组件卸载时） - measure 条目默认保留在 performance buffer 中，可通过
performance.clearMeasures()清理旧数据 - 若需长期监控，建议配合
performance.setResourceTimingBufferSize()控制资源记录数量
