查看 javascript 运行时 eme（event loop microtask execution）耗时，最直接的方法是在 chrome devtools 的 performance 面板中开启 enable advanced instrumentation 选项，并在录制时勾选 microtasks。这样在生成的火焰图（flame chart）中，你会看到专门标记为 [microtasks] 或 promise.then 的蓝色条块，它们代表了微任务队列的执行时间。
如何在 Performance 面板中定位微任务执行区间
在 Chrome DevTools 中，点击顶部的齿轮图标进入设置，找到 Rendering 标签页，勾选 Enable advanced instrumentation。回到 Performance 面板，点击录制按钮，进行一段包含异步操作（如 Promise 链、await/async）的操作后停止录制。在时间轴视图中，展开左侧的事件列表，寻找类型为 Microtask 的事件。这些事件通常表现为细长的蓝色条带，位于主线程空闲间隙或紧随宏任务之后。它们的持续时间即为 EME 耗时。
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
console.time('macro');
setTimeout(() => {
console.log('Macro task start');
Promise.resolve().then(() => {
console.log('Micro task 1');
return Promise.resolve();
}).then(() => {
console.log('Micro task 2');
}).finally(() => {
console.timeEnd('macro');
});
}, 0);
});
如何通过代码手动测量微任务耗时
除了使用 DevTools，也可以通过代码手动测量微任务的执行耗时。利用 performance.now() 获取高精度时间戳，在微任务执行前后分别记录时间。由于微任务在当前宏任务结束后立即执行，可以在一个宏任务内发起多个微任务，并计算它们之间的时间差总和。这种方法适用于需要精确量化特定逻辑块中微任务开销的场景。
立即学习“Java免费学习笔记（深入）”；
function measureMicrotasks() {
const start = performance.now();
let count = 0;
function runMicrotasks() {
if (count < 5) {
const before = performance.now();
Promise.resolve().then(() => {
// Simulate some work
for (let i = 0; i < 1000000; i++) {}
const after = performance.now();
console.log(`Microtask ${count} took: ${(after - before).toFixed(4)}ms`);
count++;
runMicrotasks();
});
} else {
console.log(`Total microtask time: ${(performance.now() - start).toFixed(4)}ms`);
}
}
runMicrotasks();
}
measureMicrotasks();
微任务堆积对主线程的影响是什么
当微任务队列中的任务过多，或者单个微任务执行时间过长时，会导致主线程被长时间占用，无法响应其他事件（如用户输入、渲染更新）。这种现象称为“微任务饥饿”（Microtask Starvation）。在 Performance 面板中，如果看到大量的 [Microtasks] 条带连续出现，且没有明显的空闲间隙，说明微任务正在阻塞主线程。优化策略包括将部分微任务拆分为宏任务（使用 setTimeout 或 queueMicrotask 结合 requestAnimationFrame），以减少单次执行的负载。
