JavaScript 事件循环：深入探讨

发布于2024-08-06

JavaScript Event Loop: A Deep Dive

JavaScript 是一种单线程语言，一次执行一个任务。然而，由于事件循环，它可以轻松处理异步操作。事件循环是一个基本概念，它为 JavaScript 的并发模型提供了动力，使其能够在不阻塞主线程的情况下有效地管理多个操作。在本文中，我们将探讨 JavaScript 事件循环的复杂性，了解它的工作原理以及为什么它对于开发响应式 Web 应用程序至关重要。

什么是 JavaScript 事件循环？

事件循环是 JavaScript 用于处理异步操作的机制。它不断检查调用堆栈和任务队列，确保任务按正确的顺序执行。事件循环的主要目标是通过管理同步和异步代码的执行来保持应用程序的响应能力。

事件循环的关键组件

1。调用堆栈：

调用堆栈是一种按后进先出 (LIFO) 顺序跟踪函数调用的数据结构。当一个函数被调用时，它被添加到堆栈中。当函数执行完成时，它将从堆栈中删除。

2. Web API：

Web API 由浏览器（或 Node.js 环境）提供，用于处理异步操作，例如 setTimeout、HTTP 请求（XMLHttpRequest、Fetch API）和 DOM 事件。这些 API 在 JavaScript 引擎之外运行。

3.回调队列（任务队列）：

回调队列是保存异步操作回调的数据结构。当调用堆栈为空时执行这些回调。

4。事件循环：

事件循环持续监视调用堆栈和回调队列。如果调用堆栈为空，它将从队列中取出第一个回调并将其推入堆栈，允许其执行。

事件循环如何工作

要了解事件循环，让我们看一个示例：

console.log('Start');

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

console.log('End');

逐步执行：

1。初始化：

console.log('Start') 函数被推入调用堆栈并执行，将 Start 打印到控制台。然后该函数将从堆栈中删除。

2.异步操作：

setTimeout 函数被调用，并带有回调和 0 毫秒的延迟。 setTimeout 函数被压入调用堆栈，然后在设置计时器后立即删除。回调被传递到 Web API。

3.继续：

console.log('End') 函数被压入调用堆栈并执行，将 End 打印到控制台。然后该函数将从堆栈中删除。

4。回调执行：

调用堆栈为空后，事件循环检查回调队列。来自 setTimeout 的回调被移动到回调队列，然后推送到调用堆栈，将 Timeout 打印到控制台。

微任务和宏任务

在 JavaScript 中，任务分为两种类型：微任务和宏任务。理解它们之间的区别对于编写高效的异步代码至关重要。

1。微任务：

微任务包括 Promise 和 MutationObserver 回调。它们具有更高的优先级，并且在宏任务之前执行。在每个宏任务之后，事件循环都会检查微任务队列并执行所有可用的微任务。

2.宏任务：

宏任务包括setTimeout、setInterval和I/O操作。它们按照添加到回调队列的顺序执行。

Promise 示例

考虑以下带有承诺的示例：

console.log('Start');

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

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

console.log('End');