JavaScript 事件循环：微任务和宏任务

JavaScript 的事件循环（Event Loop）是其异步编程的核心机制，它通过微任务（Microtasks）和宏任务（Macrotasks）来管理代码的执行顺序。

基本概念

事件循环流程

1. 执行同步代码（这属于初始的宏任务）
2. 执行当前宏任务中产生的所有微任务
3. 渲染页面（如果需要）
4. 从宏任务队列中取出下一个宏任务执行
5. 重复上述过程

宏任务 (Macrotasks)

• 包括：setTimeout, setInterval, setImmediate (Node.js), I/O 操作, UI 渲染, 事件回调等
• 特点：每次事件循环只执行一个宏任务

微任务 (Microtasks)

• 包括：Promise.then/catch/finally, process.nextTick (Node.js), MutationObserver 等
• 特点：在每个宏任务执行完后，会清空整个微任务队列

执行顺序示例

console.log('script start'); // 同步代码，宏任务

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

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

console.log('script end'); // 同步代码，宏任务

// 输出顺序:
// script start
// script end
// promise1
// promise2
// setTimeout

关键点

1. 微任务优先：在一个宏任务执行完毕后，会立即执行所有可执行的微任务，然后再执行下一个宏任务
2. 微任务会阻塞渲染：因为微任务在当前宏任务结束后立即执行，如果微任务队列很长，会延迟页面渲染
3. 嵌套调用：如果在微任务中产生新的微任务，它们会在当前微任务队列清空前执行

// 微任务嵌套示例
Promise.resolve().then(() => {
  console.log('微任务1');
  Promise.resolve().then(() => {
    console.log('嵌套微任务');
  });
}).then(() => {
  console.log('微任务2');
});

// 输出顺序:
// 微任务1
// 嵌套微任务
// 微任务2

理解事件循环、微任务和宏任务的执行顺序对于编写正确的异步代码和避免潜在问题非常重要。