JavaScript 为什么要区分微任务和宏任务？ - 前端面试题

JavaScript 区分微任务（microtasks）和宏任务（macrotasks）主要是为了有效地管理异步操作的执行时机和顺序。这两种类型的任务允许 JavaScript 引擎维持一个控制异步操作何时何地执行的精细化调度机制。

宏任务 (Macrotasks)

宏任务通常是浏览器的主要任务，包括但不限于：

setTimeout
setInterval
I/O 操作
UI 渲染
事件处理（如点击、滚动事件）

每次执行栈为空时，事件循环都会从任务队列中取出一个宏任务执行。

微任务 (Microtasks)

微任务通常是需要快速响应的任务，执行时机在每个宏任务之后，以及JavaScript执行环境准备好以后。微任务包括：

Promise 回调（例如.then、.catch和.finally）
MutationObserver 的回调
queueMicrotask函数

执行顺序

在每个宏任务执行完毕后，在执行下一个宏任务之前，JavaScript 引擎会处理所有队列中的微任务。这意味着微任务总是在当前宏任务结束和下一个宏任务开始之间执行，并在新的UI渲染前完成。这样可以确保异步操作的快速响应，同时因为微任务的延迟更小，所以适合高优先级的任务。

为什么区分

区分微任务和宏任务的原因包括：

性能优化： 通过微任务，JavaScript 可以在不影响用户界面渲染的情况下，快速执行简单的操作，如承诺的解决。这提高了应用程序的响应速度和性能。
控制异步操作顺序： 微任务和宏任务的区分允许开发者控制异步操作的执行顺序。例如，一个由Promise产生的微任务可以确保其在下次UI渲染之前解决，而setTimeout可能会推迟到下一个宏任务。
避免阻塞： 对于需要快速执行的代码，使用微任务可以避免阻塞宏任务队列，这有助于避免长时间运行的任务阻塞UI更新。

示例

假设我们有以下代码：

javascript
console.log('宏任务开始');

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

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

console.log('宏任务结束');

执行顺序会是这样的：

打印"宏任务开始"
宏任务结束时，设置了一个setTimeout
打印"宏任务结束"
当前宏任务已结束，开始执行微任务队列中所有任务
打印"微任务"
微任务队列为空，开始下一个宏任务
打印"宏任务"

通过这个例子，我们可以看到微任务总是在当前执行栈清空后立即执行，而宏任务的执行则可能会因为任务队列中的其他宏任务而延迟。这种机制允许JavaScript有效地处理异步事件，同时保持对执行顺序的细粒度控制。