宏任务间的间隔：怎么测量事件循环的空隙？-js教程-PHP中文网

测量宏任务间隔即事件循环延迟，用settimeout(0)结合performance.now()获取调度延迟，≥4ms属正常；持续＞10ms提示主线程压力；配合mark/measure、周期采样与long tasks api可精准评估ui响应健康度。

宏任务间的间隔：怎么测量事件循环的空隙？

要测量宏任务之间的间隔，本质是测事件循环中“上一个宏任务结束”到“下一个宏任务开始执行”之间的时间差——这个空隙反映主线程是否被长时间占用，也叫事件循环延迟（Event Loop Latency）。

用 setTimeout 捕捉调度延迟

这是最常用、最贴近真实场景的方式。核心思路：把一个微延迟任务（setTimeout(fn, 0)）提交进队列，它实际执行时刻与提交时刻的差值，就是这段时间内事件循环被阻塞的时长。

调用 performance.now() 记录提交时间
在 setTimeout 回调里再次调用 performance.now()
两者相减即为该次调度的实际延迟（单位：毫秒）

示例：

function measureLatency() {
  const start = performance.now();
  setTimeout(() => {
    const end = performance.now();
    console.log(`本次事件循环延迟：${(end - start).toFixed(2)} ms`);
  }, 0);
}

注意：浏览器对 setTimeout(0) 有最小延迟限制（通常 ≥4ms），所以测得值 ≥4ms 是正常的；若持续远高于 10ms，说明主线程存在长任务或频繁渲染压力。

结合 mark/measure 追踪关键宏任务边界

如果想测特定两个宏任务（比如一次点击和后续的渲染完成）之间的间隔，需手动打点：

Paraflow

一款AI图像与设计工具，主要用于AI产品设计智能体，适合需要提升相关任务效率的用户。

下载

在第一个宏任务入口处（如 click 事件回调开头）调用 performance.mark('task-start')
在第二个宏任务可确认的终点（如 requestAnimationFrame 回调、或 DOM 更新后 setTimeout）调用 performance.mark('task-end')
再用 performance.measure('gap', 'task-start', 'task-end')

这样得到的 duration 就是这两个宏任务触发点之间的真实时间跨度，包含中间所有微任务、渲染、以及可能的空闲期。