JS 项目中怎么对微任务和宏任务进行顺序测试-js教程-PHP中文网

同步代码先执行，随后是微任务（如promise.then、queuemicrotask），最后才是宏任务（如settimeout），三者按performance.now()时间戳严格递增；微任务队列在每轮事件循环中被清空，而非逐个插队执行。

js 项目中怎么对微任务和宏任务进行顺序测试

直接用带时间戳的 console.log 搭配典型任务构造，就能清晰验证微任务和宏任务的执行顺序。关键不是堆砌工具，而是让每一步输出自带“时序锚点”，避免靠肉眼猜先后。

用 console.log + 时间戳观察真实执行流

这是最轻量、最可靠的方法。重点是用 performance.now() 打点，它比 Date.now() 更精准，且不受系统时间调整干扰：

同步代码立即执行，打第一个时间戳
Promise.resolve().then() 插入微任务，打第二个时间戳
setTimeout(() => {}, 0) 插入宏任务，打第三个时间戳
所有输出按时间戳严格递增，顺序就是：同步 → 微任务 → 宏任务

示例代码：

console.log('sync', performance.now());
Promis e.resolve().then(() => console.log('micro', performance.now()));
setTimeout(() => console.log('macro', performance.now()), 0);
console.log('sync-2', performance.now());

用嵌套 Promise 验证“清空机制”

微任务的核心是“本轮循环内持续执行直到队列为空”。可以在一个 .then 中再注册一个 .then，看它是否紧接前一个执行，且早于任何宏任务：

如果输出是 1 → 2 → timeout，说明两个微任务在同轮被连续执行完
如果出现 1 → timeout → 2，说明环境异常（如某些老版本 polyfill）
这种写法能暴露“微任务不是插队，而是打包清空”的本质

示例：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

Promise.resolve().then(() => {
console.log(1);
Promise.resolve().then(() => console.log(2));
});
setTimeout(() => console.log('timeout'), 0);

用 queueMicrotask 替代 Promise.then 做轻量测试

queueMicrotask 是原生微任务 API，不涉及 Promise 状态管理，更适合排除干扰：

它和 Promise.then 优先级完全一致，但更纯粹
在 .then 回调里调用 queueMicrotask，新任务仍排在当前轮次末尾，不会打断已有微任务
适合验证“微任务队列是 FIFO，不是 LIFO”这类细节

示例：

Promise.resolve().then(() => console.log('p1'));
queueMicrotask(() => console.log('q1'));
setTimeout(() => console.log('t1'), 0);
// 输出一定是 p1 → q1 → t1