Event Loop 深度解析：宏任务（Macrotask）与微任务（Microtask）的调度哲学 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位同仁，各位对JavaScript异步机制充满好奇的开发者们，大家好。今天，我们将共同踏上一段深度探索Event Loop的旅程，揭开它神秘的面纱，特别是聚焦于宏任务（Macrotask）与微任务（Microtask）这对异步调度中的核心概念。这不仅仅是一项技术解析，更是一次对JavaScript异步编程哲学的深入理解。

JavaScript，以其单线程的特性而闻名。这意味着在任何给定时间点，JavaScript引擎只能执行一个任务。然而，现代Web应用和Node.js服务往往需要处理大量的I/O操作、网络请求、用户交互等耗时任务，如果这些操作都是同步阻塞的，那么我们的应用将会陷入“未响应”的困境。Event Loop正是解决这一矛盾的关键，它让JavaScript在单线程的表象下，拥有了处理并发的能力，实现了非阻塞I/O。

要理解Event Loop，我们首先需要构建起对JavaScript运行时环境的整体认知。

JavaScript运行时环境：异步的基石

想象一下，你的JavaScript代码运行在一个舞台上，这个舞台并非空无一物，而是由几个关键组件构成：

调用栈（Call Stack）：这是JavaScript引擎执行代码的主要区域。它是一个后进先出（LIFO）的数据结构，用于跟踪当前正在执行的函数。当一个函数被调用时，它被推入栈顶；当函数执行完毕返回时，它从栈顶弹出。所有同步代码都在这里执行。

function multiply(a, b) {
    return a * b;
}

function square(n) {
    return multiply(n, n);
}

function printSquare(n) {
    let result = square(n);
    console.log(result);
}

printSquare(4);
// 1. printSquare(4) pushed to stack
// 2. square(4) pushed to stack
// 3. multiply(4, 4) pushed to stack
// 4. multiply returns, popped
// 5. square returns, popped
// 6. console.log(16) pushed to stack
// 7. console.log returns, popped
// 8. printSquare returns, popped
// Stack is empty

堆（Heap）：这是一个非结构化的内存区域，用于存储对象和函数等动态分配的内存。当你创建变量、对象时，它们的数据就存储在堆中。
Web APIs (或 Node.js APIs)：这些不是JavaScript引擎本身的一部分，而是浏览器或Node.js环境提供的接口。它们处理那些耗时或需要与外部世界交互的任务，例如：
- setTimeout() 和 setInterval() 用于定时器。
- fetch() 或 XMLHttpRequest 用于网络请求。
- DOM 操作（在浏览器环境中）。
- fs 模块用于文件系统操作（在Node.js环境中）。
- 数据库操作等。
  当JavaScript代码调用这些API时，它们会将异步任务“卸载”到这些API中，而不是在调用栈中等待，从而避免阻塞。
回调队列（Callback Queue / Task Queue / Macrotask Queue）：当Web API完成其异步操作后，它不会直接将结果返回给调用栈。相反，它会将相应的回调函数（或者说，“任务”）放入这个队列中。这是一个先进先出（FIFO）的队列。
微任务队列（Microtask Queue）：这是另一个先进先出（FIFO）的队列，但它的优先级更高。它专门用于存储某些特定类型的异步回调，例如Promise的回调函数。

而Event Loop，就是那个默默无闻，但至关重要的调度员，它协调着这些组件的工作。

Event Loop：异步的调度核心

Event Loop是一个持续运行的进程，它不断地检查调用栈是否为空。它的基本职责是：

如果调用栈为空，Event Loop就会检查回调队列。
如果回调队列中有任务，它会将队列中的第一个任务推入调用栈执行。
重复这个过程。

这就是Event Loop最基础的运作模式。但为了处理更复杂的异步场景，特别是那些需要更高优先级的异步操作，我们引入了宏任务和微任务的概念。

宏任务（Macrotask）：粗粒度的异步任务

宏任务，也被称为“任务”（Tasks）或“普通任务”，代表了JavaScript异步调度中的一个大的工作单元。它们通常涉及浏览器或Node.js环境的外部事件，或者那些可能需要更长时间才能完成的操作。

常见的宏任务来源包括：

初始的整个脚本（Script）执行：当你加载一个JavaScript文件时，整个文件的执行本身就是一个宏任务。
setTimeout() 和 setInterval() 的回调函数：这些定时器在指定时间后将它们的回调函数放入宏任务队列。
I/O 操作（Input/Output）：例如网络请求的回调（fetch 或 XMLHttpRequest 的 onload 事件），文件读取的回调（Node.js的 fs 模块）。
UI 渲染事件：在浏览器环境中，如用户点击事件（click），鼠标移动事件（mousemove）等。浏览器会在每次Event Loop迭代中决定是否进行UI渲染。
postMessage() 和 MessageChannel：用于不同上下文（如Web Workers、iframe）之间通信的消息事件。
requestAnimationFrame() (严格来说，它通常在渲染前执行，但可以被看作是浏览器Event Loop的一个特殊阶段，通常和UI渲染紧密关联)。

宏任务的调度哲学：

Event Loop在每次循环迭代中，会从宏任务队列中取出一个（且只有一个）任务来执行。当这个宏任务执行完毕后，Event Loop不会立即去处理下一个宏任务。相反，它会暂停，转而去检查微任务队列。只有当微任务队列被完全清空后，Event Loop才会再次从宏任务队列中取出下一个任务。

这意味着宏任务之间的执行，中间会穿插着微任务的执行。

让我们通过一个代码示例来理解宏任务的优先级和行为：

console.log('Script Start'); // 1. 同步代码

setTimeout(() => {
    console.log('setTimeout 1'); // 3. 宏任务
}, 0);

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

console.log('Script End'); // 2. 同步代码

// 预期输出:
// Script Start
// Script End
// setTimeout 1
// setTimeout 2

解析：

console.log('Script Start') 是同步代码，立即执行，输出 Script Start。
第一个 setTimeout 被调用，它的回调函数被Web API接管，并在等待0毫秒后被放入宏任务队列。
第二个 setTimeout 同样被调用，其回调函数也被放入宏任务队列。
console.log('Script End') 是同步代码，立即执行，输出 Script End。
此时，调用栈为空。Event Loop开始它的第一个循环迭代。
Event Loop检查宏任务队列，发现 setTimeout 1 的回调函数。它被推入调用栈执行，输出 setTimeout 1。
setTimeout 1 执行完毕，调用栈再次为空。
Event Loop检查微任务队列（此时为空）。
Event Loop再次检查宏任务队列，发现 setTimeout 2 的回调函数。它被推入调用栈执行，输出 setTimeout 2。
所有任务完成。

这个例子清楚地展示了同步代码优先于宏任务执行，并且宏任务之间是按它们进入队列的顺序依次执行的。

宏任务与UI渲染（浏览器环境特有）：

在浏览器环境中，UI渲染通常发生在每个Event Loop迭代的末尾，即在一个宏任务执行完毕且所有微任务也执行完毕之后。这意味着如果一个宏任务执行时间过长，或者微任务队列中有大量任务，都可能导致UI渲染的延迟，造成页面卡顿。

// 浏览器环境
console.log('Script Start');

setTimeout(() => {
    console.log('setTimeout callback');
    // 假设这里进行了耗时的同步计算，会阻塞UI更新
    let i = 0;
    while (i < 1000000000) { // 模拟耗时操作
        i++;
    }
    console.log('setTimeout callback finished');
}, 0);

document.getElementById('myButton').addEventListener('click', () => {
    console.log('Button clicked');
    // 这也是一个宏任务
});

// 模拟一些初始的DOM操作，假设会触发渲染
document.body.style.backgroundColor = 'lightblue';

console.log('Script End');

// 预期行为:
// 1. Script Start
// 2. Script End
// 3. 页面背景变为lightblue (渲染发生)
// 4. setTimeout callback
// 5. 等待耗时计算...
// 6. setTimeout callback finished
// 7. 如果此时点击按钮，Button clicked 会在 setTimeout 完成后，下一次Event Loop迭代中执行。

这个例子强调了宏任务（包括事件回调）会按照Event Loop的节奏执行，并且耗时的宏任务会阻塞后续的Event Loop迭代，包括UI更新和响应用户交互。

微任务（Microtask）：高优先级的异步任务

微任务，顾名思义，是比宏任务更“微小”、更精细的异步任务。它们具有更高的优先级，会在当前宏任务执行完毕后，但在下一个宏任务开始之前，被Event Loop优先执行。

常见的微任务来源包括：

Promise 的回调函数：Promise.prototype.then(), Promise.prototype.catch(), Promise.prototype.finally() 的回调函数。
async/await 中的 await 后的代码：await 关键字会将 await 后面的代码放入微任务队列。
queueMicrotask()：这是一个明确用于调度微任务的API。
MutationObserver 的回调函数：用于监听DOM变化的API。
process.nextTick() (Node.js特有)：在Node.js环境中，process.nextTick() 的回调函数具有最高的优先级，甚至高于其他微任务。

微任务的调度哲学：

Event Loop在执行完一个宏任务后，会立即清空微任务队列中的所有任务，然后才可能进行UI渲染（在浏览器中），或者开始下一个宏任务的调度。这意味着微任务可以在宏任务之间“插队”。

让我们通过一个经典的例子来理解微任务的优先级：

console.log('Script Start'); // 1. 同步代码

setTimeout(() => {
    console.log('setTimeout callback'); // 4. 宏任务
}, 0);

Promise.resolve()
    .then(() => {
        console.log('Promise then 1'); // 3. 微任务
    })
    .then(() => {
        console.log('Promise then 2'); // 3. 微任务 (链式Promise的then会作为新的微任务)
    });

console.log('Script End'); // 2. 同步代码

// 预期输出:
// Script Start
// Script End
// Promise then 1
// Promise then 2
// setTimeout callback

解析：

console.log('Script Start') 立即执行，输出 Script Start。
setTimeout 被调用，其回调函数被Web API接管，并在等待0毫秒后被放入宏任务队列。
Promise.resolve() 创建一个已解决的Promise。它的第一个 .then() 回调函数被放入微任务队列。
console.log('Script End') 立即执行，输出 Script End。
此时，调用栈为空。Event Loop开始它的第一个循环迭代。
Event Loop检查微任务队列，发现 Promise then 1 的回调函数。它被推入调用栈执行，输出 Promise then 1。
Promise then 1 执行完毕。此时，由于 Promise.then 返回了一个新的Promise，如果它后面还有 .then，那么这个新的 .then 的回调也会被立即添加到微任务队列。所以 Promise then 2 的回调现在也进入了微任务队列。
Event Loop继续检查微任务队列（因为它必须清空整个微任务队列）。发现 Promise then 2。它被推入调用栈执行，输出 Promise then 2。
Promise then 2 执行完毕。微任务队列现在为空。
Event Loop检查宏任务队列，发现 setTimeout callback。它被推入调用栈执行，输出 setTimeout callback。
所有任务完成。

这个例子清晰地展示了微任务队列在当前宏任务（这里的当前宏任务就是指整个初始脚本的执行）结束后，但在下一个宏任务（setTimeout 的回调）开始之前被完全清空。

async/await 的微任务行为：

async/await 是Promise的语法糖，其底层实现仍然基于Promise和微任务。

async function asyncFunc() {
    console.log('Async Function Start'); // 1. 同步
    await Promise.resolve(); // 2. await 会暂停函数执行，并将后续代码作为微任务调度
    console.log('Async Function End'); // 4. 微任务
}

console.log('Script Start'); // 同步
asyncFunc();
console.log('Script End'); // 同步

// 预期输出:
// Script Start
// Async Function Start
// Script End
// Async Function End

解析：

console.log('Script Start') 立即执行。
asyncFunc() 被调用。
console.log('Async Function Start') 立即执行。
遇到 await Promise.resolve()。此时，asyncFunc 的执行被暂停。await 后面的代码（即 console.log('Async Function End')）被包装成一个Promise的 then 回调，并被放入微任务队列。
asyncFunc 调用结束，控制权返回给主线程。
console.log('Script End') 立即执行。
此时，调用栈为空。Event Loop检查微任务队列，发现 console.log('Async Function End')。它被推入调用栈执行。
所有任务完成。

这个例子进一步巩固了微任务的高优先级。await 后的代码，即使它看起来像是“等待”，实际上也是在当前宏任务执行完毕后，以微任务的形式立即执行。

queueMicrotask() 的使用：

ES2021引入了 queueMicrotask() API，它提供了一种直接将函数调度为微任务的方式，无需通过Promise。

console.log('Script Start');

setTimeout(() => {
    console.log('setTimeout callback');
}, 0);

queueMicrotask(() => {
    console.log('queueMicrotask callback 1');
});

Promise.resolve().then(() => {
    console.log('Promise then callback');
});

queueMicrotask(() => {
    console.log('queueMicrotask callback 2');
});

console.log('Script End');

// 预期输出:
// Script Start
// Script End
// queueMicrotask callback 1
// Promise then callback
// queueMicrotask callback 2
// setTimeout callback

解析：

同步代码 Script Start 和 Script End 立即执行。
setTimeout 回调进入宏任务队列。
queueMicrotask callback 1 进入微任务队列。
Promise.then 回调进入微任务队列。
queueMicrotask callback 2 进入微任务队列。
当前宏任务（主脚本）执行完毕，调用栈为空。
Event Loop开始清空微任务队列：queueMicrotask callback 1 -> Promise then callback -> queueMicrotask callback 2 依次执行。
微任务队列清空后，Event Loop从宏任务队列中取出 setTimeout callback 执行。

Event Loop循环机制的深度剖析

现在，我们已经分别了解了宏任务和微任务，是时候将它们整合到一个完整的Event Loop循环模型中。

我们可以将Event Loop的单个循环迭代（Tick）分解为以下步骤：

执行当前宏任务：从宏任务队列中取出一个宏任务并执行它。这个宏任务可以是初始的脚本，也可以是 setTimeout、I/O等回调。在执行过程中，如果遇到同步代码，它会直接在调用栈中执行。如果遇到异步操作，如 setTimeout 或 Promise，它们的回调会被调度到各自的队列中。
检查微任务队列：当前宏任务执行完毕，调用栈清空后，Event Loop不会立即进入下一个宏任务，而是会检查微任务队列。
清空微任务队列：Event Loop会持续地从微任务队列中取出任务并执行，直到微任务队列完全为空。在此过程中，如果新的微任务被添加到队列中，它们也会在当前的这个“清空微任务队列”的阶段被执行。
UI渲染（浏览器特有）：在浏览器环境中，如果浏览器判断有必要，会在微任务队列清空后进行一次UI渲染。这意味着，任何在微任务中进行的DOM修改，都会在这一次渲染中得到体现。
进入下一个循环迭代：上述步骤完成后，Event Loop会再次从宏任务队列中取出一个宏任务，重复整个过程。

下表总结了Event Loop的调度优先级：

优先级	任务类型	来源示例	调度时机
最高	同步任务	所有直接在调用栈中执行的代码	立即执行，阻塞后续代码
次高	`process.nextTick()` (Node.js)	`process.nextTick(callback)`	在当前宏任务执行完毕后，所有其他微任务之前（Node.js特有）
高	微任务	`Promise.then/catch/finally`、`async/await`、`queueMicrotask()`、`MutationObserver`	在当前宏任务执行完毕后，下一次宏任务开始之前，且在UI渲染之前（浏览器），会清空整个微任务队列。
中	UI渲染 (浏览器)	浏览器内部的渲染机制	在微任务队列清空后，下一个宏任务之前，如果浏览器判断需要更新。
低	宏任务	`setTimeout`、`setInterval`、I/O事件、用户交互事件、`postMessage`	在微任务队列和UI渲染完成后，每次Event Loop迭代中取出一个执行。

一个综合性例子来演示整个流程：

// 初始脚本：这是一个宏任务
console.log('A: Script Start');

// 宏任务调度
setTimeout(() => {
    console.log('D: setTimeout 1 (Macrotask)');
    Promise.resolve().then(() => {
        console.log('E: Promise in setTimeout (Microtask)');
    });
}, 0);

// 微任务调度
Promise.resolve().then(() => {
    console.log('B: Promise then 1 (Microtask)');
    setTimeout(() => {
        console.log('F: setTimeout in Promise (Macrotask)');
    }, 0);
});

// 宏任务调度
setTimeout(() => {
    console.log('G: setTimeout 2 (Macrotask)');
}, 0);

// 微任务调度
queueMicrotask(() => {
    console.log('C: queueMicrotask (Microtask)');
});

console.log('H: Script End');

// 预期输出:
// A: Script Start
// H: Script End
// B: Promise then 1 (Microtask)
// C: queueMicrotask (Microtask)
// D: setTimeout 1 (Macrotask)
// E: Promise in setTimeout (Microtask)
// F: setTimeout in Promise (Macrotask)
// G: setTimeout 2 (Macrotask)

逐行分析：

console.log('A: Script Start')：立即执行，输出 A: Script Start。
setTimeout 1：回调函数被放入宏任务队列。
Promise.resolve().then(() => { ... })：回调函数 B 被放入微任务队列。
setTimeout 2：回调函数被放入宏任务队列。
queueMicrotask(() => { ... })：回调函数 C 被放入微任务队列。
console.log('H: Script End')：立即执行，输出 H: Script End。
主脚本（当前宏任务）执行完毕。调用栈清空。

— Event Loop 第1轮迭代开始 —

清空微任务队列：
- 取出微任务 B。执行 console.log('B: Promise then 1 (Microtask)')，输出 B: Promise then 1 (Microtask)。
- 在 B 的执行过程中，又调度了一个 setTimeout（回调 F），它被放入宏任务队列。
- 微任务队列中还有 C。取出微任务 C。执行 console.log('C: queueMicrotask (Microtask)')，输出 C: queueMicrotask (Microtask)。
- 微任务队列清空。
UI渲染（如果浏览器需要）。
执行下一个宏任务：
- 从宏任务队列中取出最早进入的 setTimeout 1（回调 D）。执行 console.log('D: setTimeout 1 (Macrotask)')，输出 D: setTimeout 1 (Macrotask)。
- 在 D 的执行过程中，调度了一个 Promise.resolve().then()（回调 E），它被放入微任务队列。
- setTimeout 1 执行完毕。调用栈清空。

— Event Loop 第2轮迭代开始 —

清空微任务队列：
- 取出微任务 E。执行 console.log('E: Promise in setTimeout (Microtask)')，输出 E: Promise in setTimeout (Microtask)。
- 微任务队列清空。
UI渲染（如果浏览器需要）。
执行下一个宏任务：
- 从宏任务队列中取出下一个 setTimeout in Promise（回调 F）。执行 console.log('F: setTimeout in Promise (Macrotask)')，输出 F: setTimeout in Promise (Macrotask)。
- setTimeout in Promise 执行完毕。调用栈清空。

— Event Loop 第3轮迭代开始 —

清空微任务队列（为空）。
UI渲染（如果浏览器需要）。
执行下一个宏任务：
- 从宏任务队列中取出 setTimeout 2（回调 G）。执行 console.log('G: setTimeout 2 (Macrotask)')，输出 G: setTimeout 2 (Macrotask)。
- setTimeout 2 执行完毕。调用栈清空。

— Event Loop 第4轮迭代开始 —

宏任务队列和微任务队列都为空。Event Loop等待新的事件。

这个详细的例子和分析，应该能清晰地描绘出Event Loop在宏任务和微任务之间的调度逻辑。

Node.js环境下的Event Loop与特有机制

虽然Event Loop的核心概念在浏览器和Node.js中是相似的，但Node.js为了其特定的I/O密集型用例，对Event Loop进行了更为精细的阶段划分，并引入了一些特有的API。

Node.js的Event Loop分为多个阶段：

Timers 阶段：执行 setTimeout() 和 setInterval() 的回调。
Pending Callbacks 阶段：执行一些系统操作的回调，如TCP错误。
Idle, Prepare 阶段：内部使用。
Poll 阶段：
- 检查新的I/O事件，并执行I/O相关的回调（文件读写、网络请求等）。
- 如果存在 setImmediate() 回调，且Poll阶段为空，则进入Check阶段执行 setImmediate() 回调。
Check 阶段：执行 setImmediate() 的回调。
Close Callbacks 阶段：执行 close 事件的回调，例如 socket.on('close', ...)。

process.nextTick()：Node.js中最优先的微任务

process.nextTick() 的回调函数在任何Event Loop阶段开始之前，或者在当前阶段执行完毕后，但始终在任何其他微任务和下一个Event Loop阶段之前 执行。它甚至比 Promise.then 具有更高的优先级，可以看作是“超级微任务”。

console.log('Script Start');

setTimeout(() => {
    console.log('setTimeout (Macrotask)');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise then (Microtask)');
});

process.nextTick(() => {
    console.log('process.nextTick (Highest Priority Microtask)');
});

console.log('Script End');

// 预期输出 (Node.js):
// Script Start
// Script End
// process.nextTick (Highest Priority Microtask)
// Promise then (Microtask)
// setTimeout (Macrotask)

setImmediate()：Node.js特有的宏任务

setImmediate() 的回调函数会在 Check 阶段执行，这通常是在当前 Poll 阶段之后。它在逻辑上与 setTimeout(fn, 0) 类似，但执行时机不同。

console.log('Script Start');

setTimeout(() => {
    console.log('setTimeout (Macrotask - Timers Phase)');
}, 0);

setImmediate(() => {
    console.log('setImmediate (Macrotask - Check Phase)');
});

console.log('Script End');

// 预期输出 (Node.js，通常情况下):
// Script Start
// Script End
// setImmediate (Macrotask - Check Phase)
// setTimeout (Macrotask - Timers Phase)
// 注意：setTimeout(fn, 0) 和 setImmediate() 的顺序在极端情况下可能不确定，
// 但在大部分普通情况下，setImmediate 会在 setTimeout 之前执行，
// 因为 setTimeout(0) 至少需要一个tick才能进入Timers阶段，
// 而 setImmediate 在Poll阶段结束后立即进入Check阶段。
// 这里的输出顺序是典型情况，但不是绝对保证。

了解Node.js的Event Loop阶段和这些特有API，对于编写高性能的Node.js应用至关重要。

实践中的应用与考量

深入理解Event Loop、宏任务与微任务的调度机制，对于JavaScript开发者来说，不仅仅是理论知识，更是解决实际问题、提升应用性能的关键。

避免Event Loop阻塞：长时间运行的同步代码（无论是在宏任务还是微任务中）都会阻塞Event Loop，导致页面卡顿、用户体验下降。对于复杂的计算，应考虑使用Web Workers或将其分解为多个小任务，通过 setTimeout 分批执行。
优化响应速度：利用微任务的高优先级，可以在不阻塞UI渲染的前提下，尽快处理一些重要的异步逻辑，例如数据更新、状态同步等。
理解DOM更新时机：在浏览器中，DOM更新通常发生在微任务清空之后、下一个宏任务之前。如果你在一个微任务中修改了DOM，那么这些修改会在本次Event Loop迭代结束时统一渲染出来。
Promise链的正确使用：了解Promise的 .then()、.catch() 回调是微任务，可以帮助你正确地组织异步逻辑，避免出现意外的执行顺序。
Node.js中的I/O优化：在Node.js中，合理使用 process.nextTick()、setImmediate() 和 setTimeout(0) 可以更精细地控制异步操作的执行时机，特别是在构建高性能网络服务时。

异步编程的精髓与展望

Event Loop、宏任务与微任务，共同构成了JavaScript异步编程的基石。它们是JavaScript能够以单线程运行却展现出强大非阻塞能力的核心。理解这套调度哲学，不仅仅是掌握了一些API的用法，更是领悟了JavaScript作为一门语言，如何优雅地处理并发和响应性。

随着Web技术的发展，新的异步模式和API可能会不断涌现，但Event Loop作为底层机制，其核心原理将长期保持稳定。因此，对Event Loop的深入理解，将是你持续精进JavaScript技能的宝贵财富。

JavaScript运行时环境：异步的基石

Event Loop：异步的调度核心

宏任务（Macrotask）：粗粒度的异步任务

微任务（Microtask）：高优先级的异步任务

Event Loop循环机制的深度剖析

Node.js环境下的Event Loop与特有机制

实践中的应用与考量

异步编程的精髓与展望

发表回复 取消回复

发表回复取消回复