宏任务与微任务的执行优先级

问题

为什么要区分宏任务和微任务？它们的执行优先级是什么？

解答

JavaScript 引擎通过区分宏任务和微任务来控制不同任务的执行优先级。

宏任务（Macrotask）

宏任务会被添加到任务队列中，在当前任务执行完毕后按顺序执行。常见的宏任务包括：

• setTimeout 和 setInterval
• DOM 事件处理程序
• AJAX 请求回调
• script 标签的加载和执行

微任务（Microtask）

微任务在当前宏任务执行结束后立即执行，优先级高于下一个宏任务。常见的微任务包括：

• Promise.then() 和 Promise.catch()
• async/await 中的 await 表达式
• MutationObserver

执行顺序示例

console.log('1');

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

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

console.log('4');

// 输出顺序：1 -> 4 -> 3 -> 2

执行流程：

1. 同步代码先执行，输出 1 和 4
2. 当前宏任务结束，执行所有微任务，输出 3
3. 进入下一个宏任务，输出 2

关键点

• 微任务优先级高于宏任务，在当前宏任务结束后立即执行
• 每个宏任务执行完毕后，会清空所有微任务队列
• 使用 Promise 替代回调函数可以更好地控制异步执行顺序
• 避免在宏任务中执行耗时操作，以免阻塞其他任务