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 条目做实时判断,只上报关心的指标:
- 检查
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()控制资源记录数量
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











