JavaScript 事件循环、宏任务和微任务剖析

Event-Loop、宏任务和微任务详解

众所周知，JavaScript 是一种单线程脚本语言，即代码通常逐行执行，早期 CV 工作中经常遇到异步编程问题，理解 Event-Loop、宏任务和微任务对于编写高效的 JavaScript 代码至关重要。

理解 Event-Loop

Event-Loop 是 JavaScript 引擎的核心机制，负责处理异步事件。它是一个无限循环，持续检查是否有待处理的事件或任务。当检测到事件时，Event-Loop 将其放入队列中，等待执行。

宏任务与微任务

宏任务和微任务都是 JavaScript 中的异步任务，但它们在执行优先级上有所不同。

宏任务

• 例如：setTimeout、setInterval、I/O 操作
• 添加到任务队列中
• 在当前 Event-Loop 循环的最后执行

微任务

• 例如：Promise.then、process.nextTick
• 添加到微任务队列中
• 在当前 Event-Loop 循环的当前阶段执行，在所有宏任务之前执行

执行顺序

Event-Loop 按照以下顺序执行任务：

1. 执行同步代码
2. 执行微任务（当前 Event-Loop 循环中所有微任务）
3. 执行宏任务（当前 Event-Loop 循环中所有宏任务）
4. 更新渲染（如果需要）
5. 返回步骤 2

例证

以下代码展示了宏任务和微任务的执行顺序：

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

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

Promise.resolve().then(() => {
  console.log('微任务 1');
});

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

process.nextTick(() => {
  console.log('微任务 2');
});

// 输出顺序：
// 同步代码 1
// 同步代码 2
// 微任务 1
// 微任务 2
// 宏任务 1

总结

Event-Loop、宏任务和微任务是理解 JavaScript 异步编程的关键概念。宏任务在 Event-Loop 循环的末尾执行，而微任务在当前循环的每个阶段执行。通过了解这些概念，您可以编写出更有效率、更响应的 JavaScript 代码。

---