微任务、宏任务和 Event-Loop：深入浅出，一文搞懂

前端

2023-11-15 00:00:26

微任务、宏任务和 Event-Loop 是 Web 开发中至关重要的概念，理解它们对于构建高效、响应迅速的应用程序至关重要。本文将深入浅出地介绍这些概念，让您全面掌握它们的原理和相互作用。

微任务和宏任务

在 JavaScript 中，任务分为两种类型：微任务和宏任务。

微任务： 由 JavaScript 引擎在当前调用栈执行完后立即执行。微任务包括 Promise 的 .then() 回调、async/await 表达式的解决结果以及 DOM 事件监听器（例如，click、mouseover）。
宏任务： 在当前调用栈和所有微任务执行完后再执行。宏任务包括 setTimeout、setInterval、requestAnimationFrame 和 I/O 操作（例如，HTTP 请求、文件读取）。

Event-Loop

Event-Loop 是 JavaScript 引擎的核心，它负责调度任务的执行。当 JavaScript 引擎遇到一个微任务或宏任务时，它会将其添加到相应的队列中。Event-Loop 会不断循环遍历这两个队列，依次执行其中的任务。

执行过程

当一个宏任务开始执行时，Event-Loop 会将其放入调用栈中。调用栈会一直执行，直到遇到一个微任务。此时，Event-Loop 会暂停宏任务的执行，将微任务放入调用栈中，并执行它。一旦所有微任务执行完毕，Event-Loop 才会重新执行宏任务。

这种交错执行微任务和宏任务的方式确保了 JavaScript 程序在处理用户输入、DOM 更新和其他异步操作时保持响应性。

代码示例

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

console.log('Start');

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

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

console.log('End');