javascript事件循环中,宏任务执行完后清空全部微任务队列;测试时用数组收集执行顺序可准确验证:同步代码→微任务→宏任务,如['1','6','4','5','2','3']。

要验证 JavaScript 中宏任务(macrotask)与微任务(microtask)的执行顺序,核心是构造能明确区分两类任务的异步操作,并通过可观察的输出(如 console.log 或数组收集)捕获执行时序。测试本身不需要框架,但用 Jest、Vitest 或纯 Node.js + 断言也能清晰验证。
理解关键执行规则
JavaScript 事件循环中:
- 每次宏任务执行完后,会**清空整个微任务队列**(所有 pending 的 Promise.then、queueMicrotask 回调);
- 宏任务包括:setTimeout、setInterval、I/O、UI 渲染、script 标签执行等;
- 微任务包括:Promise.then/catch/finally、queueMicrotask、MutationObserver 回调;
- 同一轮事件循环中,微任务总在宏任务之后、下一个宏任务之前执行。
编写可断言的测试逻辑(推荐用数组收集顺序)
避免依赖 console.log 的视觉判断,改用数组按序 push 字符串,最后断言数组内容:
const steps = [];
steps.push('1');
setTimeout(() => {
steps.push('2');
Promise.resolve().then(() => steps.push('3'));
}, 0);
Promise.resolve().then(() => steps.push('4'));
queueMicrotask(() => steps.push('5'));
// 立即执行的同步代码
steps.push('6');
// ✅ 此时 steps = ['1', '6', '4', '5', '2', '3']
// 验证:expect(steps).toEqual(['1', '6', '4', '5', '2', '3']);
用 Jest/Vitest 编写结构化测试用例
由于微任务和宏任务涉及异步,需用 await 或 done 确保断言在所有异步完成后再执行。推荐使用 await new Promise(setTimeout) 触发一轮完整循环:
test('macro vs micro task execution order', async () => {
const log = [];
log.push('start');
setTimeout(() => log.push('timeout-1'), 0);
Promise.resolve().then(() => log.push('promise-1'));
queueMicrotask(() => log.push('micro-1'));
// 同步部分
log.push('sync');
// 等待至少一个宏任务周期(确保 setTimeout 和微任务都已执行)
await new Promise(resolve => setTimeout(resolve, 0));
expect(log).toEqual([
'start',
'sync',
'promise-1',
'micro-1',
'timeout-1'
]);
});
进阶验证:嵌套微任务与多轮宏任务
可测试更复杂场景,例如微任务中再注册微任务,或连续 setTimeout:
test('nested microtasks and chained macrotasks', async () => {
const log = [];
setTimeout(() => {
log.push('mac1');
Promise.resolve().then(() => log.push('mic1-in-mac1'));
}, 0);
Promise.resolve().then(() => {
log.push('mic1');
queueMicrotask(() => log.push('mic2-in-mic1'));
});
setTimeout(() => log.push('mac2'), 0);
await new Promise(resolve => setTimeout(resolve, 0));
// 执行顺序:同步 → mic1 → mic2-in-mic1 → mac1 → mic1-in-mac1 → mac2
expect(log).toEqual(['mic1', 'mic2-in-mic1', 'mac1', 'mic1-in-mac1', 'mac2']);
});
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











