JS基础-6：深入解析堆栈、队列、事件循环、宏任务和微任务

导言

在 JavaScript 的世界中，了解堆栈、队列、事件循环、宏任务和微任务对于掌握语言的复杂性至关重要。这些概念共同构成了 JavaScript 的执行机制，理解它们将使您能够创建更高效、更响应的应用程序。

堆栈和队列

堆栈 是一种“后进先出”的数据结构，其中元素按添加顺序排列。就像一叠盘子，您只能从栈顶添加或删除元素。在 JavaScript 中，函数调用在堆栈中管理，每个函数调用都在堆栈上创建一个新的帧，包含函数的局部变量和参数。

队列 是一种“先进先出”的数据结构，其中元素按到达顺序排列。就像排队等候一样，您先进入队列，然后才能被服务。在 JavaScript 中，队列用于管理事件，例如 DOM 事件和异步回调。

事件循环

事件循环是 JavaScript 执行的中心。它是一个无限循环，持续检查事件队列，并在队列中有事件时执行它们。每次事件被处理时，它将被从队列中删除，为下一个事件腾出空间。

宏任务和微任务

宏任务和微任务是事件队列中的两种不同类型。

• 宏任务： 宏任务是 JavaScript 执行中较大的任务，例如函数调用和 setTimeout()。它们会被添加到事件队列的末尾，并在当前事件循环完成后执行。
• 微任务： 微任务是 JavaScript 执行中较小的任务，例如 Promise 和 MutationObserver。它们会被添加到事件队列的前面，并在当前事件循环结束之前执行。

交互

堆栈、队列、事件循环、宏任务和微任务一起工作，为 JavaScript 提供了一个异步和非阻塞的执行模型。

• 当执行 JavaScript 代码时，函数调用被添加到堆栈中。
• 当事件发生时，例如单击按钮或网络请求完成，它将被添加到事件队列中。
• 事件循环不断检查事件队列，当有事件时，它会从队列中取出事件并执行它。
• 如果事件是一个宏任务，它将被添加到事件队列的末尾并稍后执行。
• 如果事件是一个微任务，它将被添加到事件队列的前面并立即执行。

示例

以下示例演示了堆栈、队列和事件循环之间的交互：

// 添加一个宏任务
setTimeout(() => {
  console.log("宏任务");
}, 0);

// 添加一个微任务
Promise.resolve().then(() => {
  console.log("微任务");
});

console.log("主线程");

在这个例子中，尽管宏任务是在微任务之前添加的，但由于微任务会被优先执行，所以输出将是：

主线程
微任务
宏任务

结论

理解堆栈、队列、事件循环、宏任务和微任务对于编写高效的 JavaScript 应用程序至关重要。通过掌握这些概念，您可以控制代码执行，创建响应迅速且用户友好的应用程序。