作业队列与事件循环

JavaScript 的 事件循环（Event Loop） 和 作业队列（Job Queue） 是理解异步执行的核心机制。

基本概念

1. 调用栈（Call Stack）

• 用于追踪函数调用的栈结构
• 同步任务在这里执行（后进先出）
• 当栈为空时，事件循环开始工作

2. 任务队列（Task Queue / Callback Queue）

• 也称宏任务队列（MacroTask Queue）
• 存放：setTimeout、setInterval、I/O、UI 渲染等回调

3. 作业队列（Job Queue / MicroTask Queue）

• 也称微任务队列
• 存放：Promise 回调（.then/.catch/.finally）、queueMicrotask、MutationObserver 等

事件循环执行流程

console.log("1"); // 同步

setTimeout(() => {
    console.log("2"); // 宏任务
}, 0);

Promise.resolve().then(() => {
    console.log("3"); // 微任务
});

console.log("4"); // 同步

// 输出顺序：1 → 4 → 3 → 2

执行步骤：

• 执行所有同步代码（调用栈）
• 清空所有微任务（Job Queue）
• 渲染（如果需要）
• 从宏任务队列取一个任务执行
• 重复步骤 2-4

详细执行顺序示例

console.log("script start"); // 1. 同步

setTimeout(function () {
    console.log("setTimeout"); // 6. 宏任务
}, 0);

Promise.resolve()
    .then(function () {
        console.log("promise1"); // 3. 微任务
    })
    .then(function () {
        console.log("promise2"); // 4. 微任务
    });

queueMicrotask(() => {
    console.log("queueMicrotask"); // 5. 微任务
});

console.log("script end"); // 2. 同步

// 输出顺序：
// script start
// script end
// promise1
// promise2
// queueMicrotask
// setTimeout

不同任务类型的执行时机

宏任务（MacroTasks）：

setTimeout(() => console.log("timeout"));
setInterval(() => console.log("interval"));
requestAnimationFrame(() => console.log("raf"));
// I/O 操作
// UI 渲染

微任务（MicroTasks）：

Promise.then/catch/finally
async/await（底层是Promise）
queueMicrotask()
MutationObserver
process.nextTick（Node.js）

嵌套示例

// 示例1：微任务中的微任务
Promise.resolve()
    .then(() => {
        console.log("promise1");
        Promise.resolve().then(() => console.log("promise inner"));
    })
    .then(() => {
        console.log("promise2");
    });

// 输出：promise1 → promise inner → promise2

// 示例2：混合执行
setTimeout(() => console.log("timeout1"));

Promise.resolve().then(() => {
    console.log("promise1");
    setTimeout(() => console.log("timeout in promise"));
});

setTimeout(() => console.log("timeout2"));

Promise.resolve().then(() => console.log("promise2"));

// 输出顺序：
// promise1 → promise2 → timeout1 → timeout2 → timeout in promise

Node.js 与浏览器的差异