如何通过 Performance API 捕捉性能异常事件-js教程-PHP中文网

performance api 通过 performanceobserver 主动监听 paint、lcp、cls、longtask 等事件并结合业务埋点与多维度上下文判定性能异常，捕获后结构化上报。

如何通过 performance api 捕捉性能异常事件

Performance API 本身不直接“抛出异常”，但它能精准识别并暴露前端运行中的性能异常事件——即那些违背用户体验基准、超出合理阈值的性能退化行为。捕捉的关键不是等错误发生，而是主动监听浏览器内核派发的性能信号，并结合业务逻辑判定是否构成“异常”。

监听浏览器原生性能事件类型

PerformanceObserver 是捕获性能异常事件的核心机制，它以非阻塞方式接收浏览器自动记录的性能条目（PerformanceEntry）。需重点监听以下几类：

paint：获取首次绘制（FP）、首次内容绘制（FCP），延迟过高（如 FCP > 3s）即属渲染异常
largest-contentful-paint：LCP 超过 2.5s 表明核心内容加载严重滞后
layout-shift：单次 CLS > 0.1 或累积 CLS > 0.25，说明页面存在明显布局抖动
longtask：主线程连续占用 ≥50ms 的任务，是卡顿的直接证据
first-input：FID > 100ms 意味着用户首次交互响应已失敏
resource：资源 duration > 3000ms 或 status ≠ 200，提示加载失败或超时

示例：统一注册观察器

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.entryType === 'longtask' && entry.duration > 100) {
      console.warn('长任务异常:', entry.startTime, '持续', entry.duration, 'ms');
      reportPerformanceAnomaly({ type: 'longtask', duration: entry.duration });
    }
    if (entry.entryType === 'layout-shift' && entry.value > 0.1) {
      console.warn('布局偏移异常:', entry.value);
      reportPerformanceAnomaly({ type: 'cls', value: entry.value });
    }
  });
});
observer.observe({ entryTypes: ['paint', 'largest-contentful-paint', 'layout-shift', 'longtask', 'first-input', 'resource'] });

结合时间戳与自定义标记识别业务级异常

单纯依赖系统事件不够细粒度。可通过 performance.mark() 和 performance.measure() 主动埋点，定位具体环节的耗时异常：

阿里云AI平台

阿里云AI平台是一款面向企业和开发者的云端人工智能服务平台。

下载

在关键操作前打点：performance.mark('api-fetch-start')
在数据处理完成时再打点：performance.mark('api-fetch-end')
计算耗时：performance.measure('api-fetch-total', 'api-fetch-start', 'api-fetch-end')
获取结果：performance.getEntriesByName('api-fetch-total')[0]?.duration
若该值持续 > 2000ms，即可判定为接口响应异常（即使 HTTP 状态码正常）