王子主页JavaScript作为单线程语言，通过事件循环（Event Loop）机制实现了非阻塞的异步执行。这一机制是理解JavaScript异步编程的核心，本文ZHANID工具网将从基础概念、执行顺序、任务队列分类及实际案例四个维度展开详细解析。
一、事件循环的基础架构
事件循环由以下核心组件构成：
-
调用栈（Call Stack）：存储同步代码的执行上下文，遵循后进先出（LIFO）原则。
-
任务队列：分为宏任务队列（Macrotask Queue）和微任务队列（Microtask Queue），存储异步任务的回调函数。
-
Web APIs/C++ APIs：浏览器或Node.js环境提供的异步接口（如
setTimeout、Promise）。
关键流程：
-
同步代码直接进入调用栈执行。
-
异步操作（如网络请求）由Web APIs处理，完成后将回调函数推入任务队列。
-
调用栈清空后，事件循环优先处理微任务队列，再处理宏任务队列。
二、任务队列的优先级与执行顺序
任务队列遵循严格的优先级规则：
-
微任务优先于宏任务：每轮事件循环中，微任务队列必须完全清空后才会执行下一个宏任务。
-
宏任务按队列顺序执行：每次仅处理一个宏任务，完成后再次检查微任务队列。
任务分类表
| 任务类型 | 常见API |
|---|---|
| 宏任务（Macrotask） | setTimeout、setInterval、setImmediate（Node.js）、I/O操作、UI渲染、<script>标签代码 |
| 微任务（Microtask） | Promise.then/catch/finally、MutationObserver、process.nextTick（Node.js） |
执行顺序规则
-
同步代码 → 2. 微任务队列 → 3. 宏任务队列（每次仅处理一个宏任务，循环往复）。
三、实际案例解析
案例1：基础示例
console.log('1'); // 同步代码
setTimeout(() => console.log('2'), 0); // 宏任务
Promise.resolve().then(() => console.log('3')); // 微任务
console.log('4'); // 同步代码
输出顺序：1 → 4 → 3 → 2
解析：
-
同步代码
1和4直接执行。 -
setTimeout回调进入宏任务队列。 -
Promise.then回调进入微任务队列。 -
调用栈清空后，先执行微任务
3，再执行宏任务2。
案例2：嵌套异步任务
console.log('script start');
setTimeout(() => {
console.log('setTimeout 1');
Promise.resolve().then(() => console.log('promise in setTimeout'));
}, 0);
Promise.resolve()
.then(() => {
console.log('promise 1');
setTimeout(() => console.log('setTimeout 2'), 0);
})
.then(() => console.log('promise 2'));
console.log('script end');
输出顺序：script start → script end → promise 1 → promise 2 → setTimeout 1 → promise in setTimeout → setTimeout 2
解析：
-
同步代码
script start和script end直接执行。 -
第一个
Promise.then回调进入微任务队列，输出promise 1。 -
嵌套的
setTimeout回调进入宏任务队列。 -
第二个
Promise.then回调进入微任务队列，输出promise 2。 -
执行宏任务
setTimeout 1，其内部的Promise.then回调再次进入微任务队列。 -
最后执行宏任务
setTimeout 2。
案例3：async/await与微任务
async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end'); // 微任务
}
async function async2() { console.log('async2'); }
console.log('script start');
setTimeout(() => console.log('setTimeout'), 0);
async1();
new Promise((resolve) => {
console.log('promise1');
resolve();
}).then(() => console.log('promise2')); // 微任务
console.log('script end');
输出顺序：script start → async1 start → async2 → promise1 → script end → async1 end → promise2 → setTimeout
解析：
-
同步代码
script start、async1 start、async2、promise1、script end依次执行。 -
await将async1 end推入微任务队列。 -
Promise.then回调promise2进入微任务队列。 -
调用栈清空后，依次执行微任务
async1 end和promise2。 -
最后执行宏任务
setTimeout。
四、事件循环的设计意义
-
单线程非阻塞：通过异步任务队列避免主线程阻塞，提升界面响应效率。
-
任务优先级管理：微任务（如Promise）优先于宏任务（如UI渲染），确保关键操作及时执行。
-
浏览器与Node.js的差异：
-
浏览器：微任务队列清空后触发UI渲染。
-
Node.js：事件循环分为多个阶段（如定时器、I/O、检查阶段），
process.nextTick优先级高于Promise.then。
五、常见误区与注意事项
-
setTimeout(fn, 0)不立即执行：回调函数需等待当前同步代码和微任务队列清空后才会执行。 -
微任务嵌套导致性能问题：若微任务中不断创建新微任务（如递归
Promise.then），可能阻塞宏任务执行。 -
Node.js的
process.nextTick：其优先级高于Promise.then，需注意区分环境特性。
通过理解事件循环的底层机制，开发者可更高效地调试异步代码，避免竞态条件（Race Condition）和内存泄漏等问题。
