JavaScript作为单线程脚本语言，同一时间只能执行一个任务，为了不阻塞主线程，同时处理异步操作，设计了事件循环机制来协调同步和异步任务的执行顺序。
事件循环的核心组成
事件循环的运行依赖几个核心部分，每个部分承担不同的职责：
- 调用栈：用来存储当前正在执行的函数，遵循后进先出的原则，函数执行完就会从栈中弹出。
- 任务队列：存放等待执行的任务，分为宏任务队列和微任务队列两类。
- 事件循环：持续监听调用栈和任务队列的调度器，当调用栈为空时，会从任务队列中取出任务执行。
宏任务与微任务的区别
异步任务分为宏任务和微任务，两者的执行优先级不同，这是理解事件循环的关键：
| 类型 | 常见示例 | 执行时机 |
|---|---|---|
| 宏任务 | script脚本、setTimeout、setInterval、I/O操作、UI渲染 | 每次事件循环执行一个宏任务，执行完后再处理微任务队列 |
| 微任务 | Promise.then/catch/finally、process.nextTick（Node环境）、queueMicrotask | 当前宏任务执行完，调用栈为空时，优先清空所有微任务 |
事件循环的执行流程
一次完整的事件循环流程如下：
- 执行当前宏任务，同步代码直接进入调用栈执行，异步代码根据类型放入对应的任务队列。
- 当前宏任务的所有同步代码执行完毕，调用栈清空。
- 检查微任务队列，依次执行所有微任务，直到微任务队列清空。
- 执行下一个宏任务，重复上述流程。
代码示例演示执行顺序
下面通过一个综合示例来演示不同任务的执行顺序：
// 同步代码，属于第一个宏任务（script脚本）
console.log('同步代码1');
// setTimeout是宏任务，放入宏任务队列
setTimeout(() => {
console.log('setTimeout宏任务');
// 宏任务里的微任务
Promise.resolve().then(() => {
console.log('setTimeout里的微任务');
});
}, 0);
// Promise是微任务，放入微任务队列
Promise.resolve().then(() => {
console.log('Promise微任务1');
}).then(() => {
console.log('Promise微任务2');
});
// 同步代码
console.log('同步代码2');
// 输出顺序：
// 同步代码1
// 同步代码2
// Promise微任务1
// Promise微任务2
// setTimeout宏任务
// setTimeout里的微任务
根据执行流程分析：首先执行script这个宏任务，同步代码先输出同步代码1、同步代码2；然后清空微任务队列，输出两个Promise微任务；接着执行下一个宏任务setTimeout，先输出setTimeout宏任务，再清空它内部的微任务队列，输出setTimeout里的微任务。
常见误区说明
很多开发者会误以为setTimeout的延迟时间是精确的，实际上它只是把回调放入宏任务队列，需要等当前宏任务和所有微任务执行完才会执行。另外Promise的回调是微任务，而new Promise里面的构造函数代码是同步执行的，这一点需要注意。
Node环境的差异
Node环境的事件循环和浏览器略有不同，它有自己的一套阶段划分，比如timers、pending callbacks、idle prepare等阶段，但是微任务的执行优先级仍然高于宏任务，process.nextTick是所有微任务中优先级最高的，会在其他微任务之前执行。
JavaScript事件循环宏任务微任务调用栈修改时间：2026-06-24 21:00:34