如何通过 Performance API 监控交互延时并在检测到卡顿时自动触发降级模式-js教程-PHP中文网

PerformanceObserver 监听 longtask 是检测卡顿最直接方式，需注册 entryTypes: ['longtask'] 实时捕获 ≥50ms 任务；单个 ≥100ms 或连续两个 ≥50ms 且发生在用户点击后300ms内即触发轻量降级，iOS Safari 不支持时 fallback 至 requestAnimationFrame 检测长帧。

如何通过 performance api 监控交互延时并在检测到卡顿时自动触发降级模式

用 PerformanceObserver 监听 longtask 判断卡顿

卡顿的本质是主线程被长时间占用，浏览器无法及时响应用户操作。Performance API 中的 longtask 类型能捕获持续 ≥ 50ms 的任务（Chrome 68+、Firefox 71+、Safari 15.4+ 支持），这是比 FPS 或帧率更直接的卡顿信号。

不能依赖 performance.getEntriesByType('longtask') 主动轮询——它只返回已结束的任务，且页面加载后才开始记录；必须用 PerformanceObserver 实时监听：

注册时指定 { entryTypes: ['longtask'] }，确保首次调用前已启用
每个 longtask entry 包含 startTime、duration 和 attribution（可定位到具体脚本或框架）
注意：iOS Safari 对 longtask 支持不完整，需 fallback 到帧率估算（见下文）

如何定义“卡顿”并触发降级逻辑

单个 longtask ≥ 100ms 或连续两个 ≥ 50ms 就该警惕——这已超出用户可感知的响应阈值（100ms 内无反馈即觉卡顿）。但不能一卡就降级，得结合上下文：

若卡顿发生在用户点击后 300ms 内，优先标记为交互阻塞，立即执行降级（如关闭动画、隐藏非核心组件）
若卡顿出现在空闲期（如滚动停止后 1s），可能是后台任务，仅记录不干预
降级动作本身要轻量：requestIdleCallback 包裹、避免触发重排，否则雪上加霜

示例判断逻辑：

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.duration >= 100 && isUserInteractionActive()) {
      enterDegradationMode();
    }
  });
});
observer.observe({ entryTypes: ['longtask'] });