如何通过 Performance API 监控异步代码性能-js教程-PHP中文网

performance api 可精确拆解异步代码延迟构成：排队时间、调度开销、真实执行时间，核心依赖 performance.now() 打点、performanceobserver 捕获长任务及 mark/measure 组织逻辑。

如何通过 performance api 监控异步代码性能

可以通过 Performance API 精确测量异步代码从入队到执行、再到实际运算的全过程耗时，关键不是“测一次”，而是拆解延迟构成：排队时间、调度开销、真实执行时间。核心依赖 performance.now() 打点 + PerformanceObserver 捕获长任务 + mark/measure 组织业务逻辑。

用 performance.now() 标记异步生命周期

performance.now() 提供亚毫秒级精度，不受系统时间跳变影响，是唯一推荐的时间采集方式。不能用 Date.now()。

在异步任务“入队瞬间”打点：比如 setTimeout(fn, 0) 调用前、Promise.resolve().then() 的 then 方法调用前
在回调函数第一行立即再打点：得到“从入队到开始执行”的总延迟（含宏/微任务排队、主线程空闲等待等）
若需分离纯执行耗时，可在回调内部嵌套打点：例如 const start = performance.now(); doWork(); const end = performance.now();

区分宏任务与微任务的监控策略

事件循环中，宏任务（setTimeout、fetch 回调）和微任务（Promise.then、MutationObserver）调度优先级不同，需分开建模：

宏任务延迟：在 setTimeout(, 0) 调用前记录起点，回调内立刻记录终点 → 得到调度延迟
微任务响应：在 Promise.resolve().then(...) 的 then 调用前打点，回调内打点 → 反映当前微任务队列积压程度
连续多个 Promise.then 链式调用时，首尾时间差可体现微任务负载压力

捕获阻塞型卡顿：用 PerformanceObserver 监听 longtask

浏览器原生支持监听执行 ≥50ms 的同步任务块（如解析大 JSON、未优化的渲染逻辑），直接反映主线程是否被长期占用：

创建观察器：new PerformanceObserver(cb).observe({ entryTypes: ['longtask'] })
回调中可提取 entry.startTime 和 entry.duration，结合上下文判断是否发生在关键异步流程前后
例如：某次 fetch 成功后立即触发的 DOM 更新耗时 180ms，就属于需优化的长任务

结合 resource timing 分析异步请求全链路

对 fetch 或 XMLHttpRequest，浏览器自动记录 resource 类型条目，无需手动埋点即可获取完整阶段耗时：

过滤条件：entry.initiatorType === 'fetch' 且 entry.name 为请求 URL
关键字段：duration（总耗时）、responseStart - requestStart（TTFB）、responseEnd - responseStart（下载耗时）
注意排除干扰：缓存命中（transferSize === 0）、重定向、CORS 限制导致的无效条目