事件循环、微任务和宏任务的细腻剖析

在 JavaScript 的世界中，理解事件循环对于掌控应用程序行为至关重要。事件循环协调着代码的执行， orchestrating 事件处理、任务执行和异步调用。深入探讨事件循环、微任务和宏任务之间的错综复杂关系，我们才能充分驾驭 JavaScript 的强大功能。

事件循环

事件循环是一个持续运行的机制，它不断检查事件队列，等待处理事件。当事件队列中出现新事件时，事件循环会取出事件并将其推入执行栈（call stack）。执行栈是 JavaScript 执行代码的区域。事件处理程序将在执行栈中执行，直到执行栈为空。

微任务

微任务是异步任务，当执行栈为空时，它们将在事件队列之前执行。这使得微任务可以拦截宏任务（稍后讨论）并在宏任务执行之前修改程序状态。 Promise .then() 和 MutationObserver 回调是微任务的常见示例。

宏任务

宏任务也是异步任务，但在微任务之后执行。它们将在事件队列中排队，并在执行栈为空且微任务队列清空后执行。宏任务的例子包括 setTimeout 和 setInterval 回调以及 DOM 事件监听器。

交互

事件循环、微任务和宏任务以以下方式交互：

1. 事件循环和执行栈： 事件循环检查事件队列并将其中的事件推入执行栈。
2. 执行栈和微任务： 当执行栈为空时，事件循环会执行事件队列中的微任务。
3. 微任务和宏任务： 微任务可以将新的微任务添加到队列中。在微任务队列清空后，宏任务将在事件队列中排队。
4. 执行栈、微任务和宏任务： 执行栈中的宏任务退出后，它会将微任务队列中的微任务推入执行栈。

例子

下面的代码演示了事件循环、微任务和宏任务之间的交互：

console.log('开始');

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

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

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

console.log('结束');

输出：

开始
微任务 1
结束
宏任务 1
宏任务 2

结论

掌握事件循环、微任务和宏任务对于创建响应式、高效的 JavaScript 应用程序至关重要。通过理解它们之间的微妙区别，开发人员可以控制代码执行并优化应用程序性能。通过精通这些概念，JavaScript 开发人员可以提升他们的技能，打造出卓越的 web 体验。