JavaScript是单线程语言，所有代码都在主线程上执行，异步任务完成后会被放入对应的队列等待执行，其中任务队列和Job队列是最核心的两类队列，理解它们的执行顺序能帮我们准确预判代码的运行结果。
两类队列的基本概念
任务队列（宏任务队列）
任务队列也叫宏任务队列，存放的是宏任务，常见的宏任务类型包括：
- script整体代码
- setTimeout回调
- setInterval回调
- DOM事件回调
- IO操作回调
Job队列（微任务队列）
Job队列也叫微任务队列，存放的是微任务，常见的微任务类型包括：
- Promise的then、catch、finally回调
- async函数返回的Promise的回调
- queueMicrotask注册的回调
- MutationObserver回调
事件循环的执行流程
JavaScript的事件循环遵循固定的执行规则，整体流程可以拆解为以下几步：
- 先执行当前主线程的同步代码，直到同步代码全部执行完毕
- 检查Job队列是否有待执行的微任务，如果有则依次执行所有微任务，直到Job队列清空
- 从任务队列中取出一个最早的宏任务执行，执行完该宏任务的同步代码后，再次回到步骤2检查Job队列
- 重复上述步骤，直到所有队列都为空
核心规则是微任务的执行优先级永远高于宏任务，每次执行完一个宏任务后，都会先把当前所有微任务执行完毕，才会执行下一个宏任务。
代码示例演示执行顺序
基础示例1：宏任务与微任务的基础顺序
先看一个简单的代码案例，理解基础的执行优先级：
// 同步代码
console.log('同步代码1');
// 宏任务：setTimeout
setTimeout(() => {
console.log('宏任务setTimeout回调');
}, 0);
// 微任务：Promise.then
Promise.resolve().then(() => {
console.log('微任务Promise.then回调');
});
// 同步代码
console.log('同步代码2');
执行顺序分析：
- 先执行所有同步代码，输出同步代码1、同步代码2
- 同步代码执行完，检查Job队列，执行微任务，输出微任务Promise.then回调
- Job队列清空后，从任务队列取宏任务执行，输出宏任务setTimeout回调
最终输出结果为：
同步代码1
同步代码2
微任务Promise.then回调
宏任务setTimeout回调
基础示例2：多个微任务的执行顺序
当有多个微任务时，会按照加入Job队列的顺序依次执行：
Promise.resolve().then(() => {
console.log('微任务1');
}).then(() => {
console.log('微任务2');
});
queueMicrotask(() => {
console.log('微任务3');
});
console.log('同步代码');
执行顺序分析：
- 执行同步代码，输出同步代码
- 执行第一个Promise.then的微任务，输出微任务1，此时第二个then的回调被加入Job队列
- 执行queueMicrotask注册的微任务，输出微任务3
- 执行第二个then的微任务，输出微任务2
最终输出结果为：
同步代码
微任务1
微任务3
微任务2
进阶示例3：宏任务中产生的微任务执行顺序
宏任务执行过程中如果产生了新的微任务，会在当前宏任务执行完后立即执行：
// 第一个宏任务：整体script
console.log('宏任务1同步代码');
setTimeout(() => {
// 第二个宏任务
console.log('宏任务2同步代码');
Promise.resolve().then(() => {
console.log('宏任务2产生的微任务');
});
}, 0);
Promise.resolve().then(() => {
console.log('宏任务1产生的微任务');
});
执行顺序分析：
- 执行第一个宏任务的同步代码，输出宏任务1同步代码
- 执行第一个宏任务产生的微任务，输出宏任务1产生的微任务
- 第一个宏任务及所有微任务执行完，取第二个宏任务执行，输出宏任务2同步代码
- 执行第二个宏任务产生的微任务，输出宏任务2产生的微任务
最终输出结果为：
宏任务1同步代码
宏任务1产生的微任务
宏任务2同步代码
宏任务2产生的微任务
特殊场景：async/await的执行顺序
async函数执行时，await后面的代码会被当作微任务放入Job队列，看下面的例子：
async function asyncFunc() {
console.log('async函数内部同步代码1');
await Promise.resolve();
console.log('async函数内部await后的代码');
}
console.log('同步代码开始');
asyncFunc();
Promise.resolve().then(() => {
console.log('普通Promise微任务');
});
console.log('同步代码结束');
执行顺序分析：
- 执行同步代码，输出同步代码开始、async函数内部同步代码1、同步代码结束
- 执行微任务，先执行await后面的Promise产生的微任务，之后执行async函数await后面的代码，输出async函数内部await后的代码
- 再执行普通Promise的then微任务，输出普通Promise微任务
最终输出结果为：
同步代码开始
async函数内部同步代码1
同步代码结束
async函数内部await后的代码
普通Promise微任务
常见误区总结
很多开发者容易混淆的点主要有以下几个：
- 误区1：setTimeout时间设为0就会立即执行。实际上setTimeout的回调会被放入任务队列，即使时间是0，也需要等当前主线程同步代码和所有微任务执行完才会执行。
- 误区2：async函数await后面的代码会和同步代码一起执行。实际上await会暂停async函数的执行，后面的代码会被包装成微任务放入Job队列。
- 误区3：微任务只会在所有同步代码执行完执行一次。实际上每次执行完一个宏任务后，都会检查并执行所有微任务，直到Job队列清空。
只要牢记微任务优先级高于宏任务，每次宏任务执行完都会清空当前所有微任务的规则，就能准确判断绝大多数场景下的代码执行顺序。
JavaScript任务队列Job队列事件循环微任务修改时间：2026-06-17 07:30:33