1.事件循环揭秘：宏任务与微任务
输入“/”快速插入内容
1.事件循环揭秘：宏任务与微任务
1.事件循环揭秘：宏任务与微任务
用户8691用户86912025年9月9日修改
1. 核心概念
为了在单线程模型中处理耗时的异步操作，JavaScript 引入了事件循环机制。理解事件循环的关键在于掌握以下几个概念：
概念 | 描述 |
调用栈 (Call Stack) | 一个后进先出 (LIFO) 的数据结构，用于存储和管理函数调用。当执行一个函数时，它被推入栈顶；当函数返回时，它被弹出。所有同步代码都在调用栈中执行。 |
任务队列 (Task Queue) | 一个先进先出 (FIFO) 的数据结构，用于存放待处理的异步任务的回调函数。它分为两种类型：宏任务队列和微任务队列。 |
事件循环 (Event Loop) | 一个持续运行的进程，它不断地检查调用栈是否为空。如果为空，它会去检查微任务队列，然后是宏任务队列，并将队列中的任务回调函数推入调用栈中执行。 |
2. 宏任务 (Macrotask) 与微任务 (Microtask)
这是事件循环中最核心的区别，直接决定了代码的执行顺序。
•
宏任务 (Macrotask):
◦
描述: 通常是较大、独立的任务块。每次事件循环只会从宏任务队列中取出一个任务来执行。
◦
常见例子:
▪
setTimeout()
▪
setInterval()
▪
setImmediate() (Node.js 环境)
▪
I/O 操作 (如文件读写、网络请求)
▪
UI 渲染 (浏览器环境)
•
微任务 (Microtask):
◦
描述: 通常是需要尽快执行的、较小的任务，用于在当前任务之后、下一次宏任务之前完成一些更新或清理工作。
◦
常见例子:
▪
Promise.then(), Promise.catch(), Promise.finally()
▪
async/await (其 await 之后的部分)
▪
queueMicrotask()
▪
MutationObserver
3. 执行顺序
事件循环的执行流程可以概括为以下步骤，并不断重复：
1.
执行同步代码: 首先，将整个 script 脚本作为第一个宏任务，在调用栈中从头到尾执行所有同步代码。
2.
清空微任务队列: 执行完同步代码后，检查微任务队列。如果队列不为空，则**一次性执行所有**的微任务，直到队列变空。
◦
注意: 如果在执行微任务的过程中又产生了新的微任务，那么这些新的微任务也会被添加到队列的末尾，并在此轮中一并执行。
3.
执行一个宏任务: 微任务队列清空后，从宏任务队列中取**一个**任务，推入调用栈中执行。
4.
重复: 重复步骤 2 和 3。
一句话总结：一次事件循环 = 执行完一个宏任务 -> 执行完所有微任务。
4. 经典面试题解析
让我们通过一个包含 setTimeout, Promise, 和 async/await 的经典例子来追踪代码的执行顺序。
代码示例:
代码块
async function async1() {
console.log('2. async1 start');
await async2();
console.log('6. async1 end');
}
async function async2() {
console.log('3. async2');
}
console.log('1. script start');
setTimeout(function() {
console.log('8. setTimeout');
}, 0);
async1();
new Promise(function(resolve) {
console.log('4. promise1');
resolve();
}).then(function() {
console.log('7. promise2');
});
console.log('5. script end');