简介
JavaScript 主要在 Node.js 和浏览器中的单个线程上执行（有一些例外，例如工作线程，这超出了当前文章的范围）。在这篇文章中，我将尝试解释 Node.js 的并发机制，即事件循环。
在开始阅读本文之前，您应该熟悉堆栈及其工作原理，我过去写过这个想法，所以请查看堆栈和堆 - 不要在不了解它们的情况下开始编码 - Moshe Binieli |中
简介图片
示例
我相信通过示例学习是最好的，因此我将从 4 个简单的代码示例开始。我将分析示例，然后深入探讨 Node.js 的架构。
示例1：
console.log(1);
console.log(2);
console.log(3);
// 输出：
// 1
// 2
// 3
这个例子很简单，第一步console.log(1)进入调用堆栈，被执行然后删除，第二步console.log(2)进入调用堆栈，被执行然后删除，以此类推console.log(3)。
示例 1 的调用堆栈的可视化
示例2：
console.log(1);
setTimeout(function foo(){
console.log(2);
}, 0);
console.log(3);
// 输出：
// 1
// 3
// 2
在这个例子中我们可以看到我们立即运行setTimeout，所以我们期望console.log(2)在console.log(3)之前，但事实并非如此，让我们了解其背后的机制。
基本事件循环架构（稍后我们将深入探讨）
堆栈和堆：查看我关于此的文章（我在本文开头添加了链接）
Web API：它们内置于您的 Web 浏览器中，能够公开来自浏览器和周围计算机环境的数据，并用它执行有用的复杂操作。它们不是 JavaScript 语言本身的一部分，而是构建在核心 JavaScript 语言之上，为您提供在 JavaScript 代码中使用的额外超能力。例如，Geolocation API 提供了一些简单的 JavaScript 构造来检索位置数据，因此您可以说，在 Google 地图上绘制您的位置。在后台，浏览器实际上使用一些复杂的低级代码（例如 C++）与设备的 GPS 硬件（或任何可用于确定位置数据的硬件）进行通信，检索位置数据，并将其返回到浏览器环境以供使用在你的代码中。但同样，这种复杂性已被 API 抽象化。
事件循环和回调队列：完成Web API执行的函数将被移动到回调队列，这是一个常规队列数据结构，事件循环负责将下一个函数从回调队列中出队并将该函数发送到执行函数的调用堆栈。
执行顺序
当前位于调用堆栈中的所有函数都会被执行，然后它们会从调用堆栈中弹出。
当调用堆栈为空时，所有排队的任务都会一一弹出到调用堆栈中并执行，然后从调用堆栈中弹出。
让我们来理解示例 2
console.log(1) 方法被调用并放置在调用堆栈上并被执行。
setTimeout 方法被调用并放置在调用堆栈上并被执行，此执行创建一个对 setTimeout Web Api 的新调用，持续 0 毫秒，当它完成时（立即，或者更准确地说，那么它会最好说“尽快”）Web Api 将调用移至回调队列。
console.log(3) 方法被调用并放置在调用堆栈上并被执行。
Event Loop 看到 Call Stack 为空，从 Callback Queue 中取出“foo”方法放入 Call Stack，然后执行 console.log(2)。
示例 2 过程的可视化
所以setTimeout(function,delay)中的delay参数并不代表函数执行后的精确时间延迟。它代表等待的最短时间，在该时间之后函数将在某个时间点执行。
示例3：
console.log(1);
setTimeout(function foo() {
console.log('foo');
}, 3500);
setTimeout(function boo() {
console.log('boo');
}, 1000);
console.log(2);
// 输出：
// 1
// 2
// '嘘'
// 'foo'
示例 3 过程的可视化
示例 4：
console.log(1);
setTimeout(function foo() {
console.log('foo');
}, 6500);
setTimeout(function boo() {
console.log('boo');
}, 2500);
setTimeout(function baz() {
console.log(‘baz’);
}, 0);
for ([‘A’, ‘B’] 的 const 值) {
console.log(值);
}
函数二() {
console.log(2);
}
两个();
// 输出：
// 1
// 'A'
// 'B'
// 2
// '巴兹'
// '嘘'
// 'foo'
示例 4 过程的可视化
事件循环继续执行任务队列中等待的所有回调。在任务队列中，任务大致分为两类，即微任务和宏任务。
宏任务（任务队列）和微任务
更准确地说，实际上有两种类型的队列。
- 宏任务队列（或简称任务队列）。
- 微任务队列。
还有一些任务进入宏任务队列和微任务队列，但我将介绍常见的任务。
常见的宏任务有 setTimeout、setInterval 和 setImmediate。
常见的微任务有 process.nextTick 和 Promise 回调。
执行顺序
当前位于调用堆栈中的所有函数都会被执行，然后它们会从调用堆栈中弹出。
当调用堆栈为空时，所有排队的微任务都会一一弹出到调用堆栈中并执行，然后从调用堆栈中弹出。
当调用栈和微任务队列都为空时，所有排队的宏任务都会一一弹出到调用栈中并执行，然后从调用栈中弹出。
示例 5：
console.log(1);
setTimeout(function foo() {
console.log('foo');
}, 0);
Promise.resolve()
.then(函数 boo() {
console.log('boo');
});
console.log(2);
// 输出：
// 1
// 2
// '嘘'
// 'foo'
console.log(1) 方法被调用并放置在调用堆栈上并被执行。
SetTimeout 正在执行，console.log('foo') 被移至 SetTimeout Web Api，0 毫秒后移至宏任务队列。
Promise.resolve() 正在被调用，正在被解析，然后 .then() 方法被移动到微任务队列。
console.log(2) 方法被调用并放置在调用堆栈上并被执行。
Event Loop 发现调用堆栈为空，它首先从 Micro-Task 队列中取出任务，即 Promise 任务，将 console.log('boo') 放在调用堆栈上并执行它。
事件循环看到调用堆栈为空，然后看到微任务为空，然后从宏任务队列中取出下一个任务，即 SetTimeout 任务，放入 console.log('foo')在调用堆栈上并执行它。
示例 5 过程的可视化
对事件循环的高级理解
我正在考虑写一篇关于事件循环机制如何工作的底层文章，它本身可以是一篇文章，所以我决定对这个主题进行介绍，并附上深入解释该主题的良好链接。
事件循环底层解释
当 Node.js 启动时，它会初始化事件循环，处理提供的输入脚本（或放入 REPL），这可能会进行异步 API 调用、调度计时器或调用 process.nextTick()，然后开始处理事件循环。
下图显示了事件循环操作顺序的简化概述。 （每个框将被称为事件循环的一个“阶段”，请查看介绍图片以更好地理解循环。）
事件循环操作顺序的简化概述
每个阶段都有一个要执行的回调的 FIFO 队列（我在这里小心地说，因为根据实现的不同，可能会有其他数据结构）。虽然每个阶段都有其特殊之处，但通常，当事件循环进入给定阶段时，它将执行特定于该阶段的任何操作，然后执行该阶段队列中的回调，直到队列耗尽或达到最大回调数已执行。当队列耗尽或达到回调限制时，事件循环将进入下一阶段，依此类推。
阶段概述
计时器：此阶段执行由 setTimeout() 和 setInterval() 安排的回调。
挂起的回调：执行延迟到下一个循环迭代的 I/O 回调。
空闲，准备：仅内部使用。
Poll：检索新的I/O事件；执行 I/O 相关回调（几乎所有回调，关闭回调、计时器调度的回调和 setImmediate() 除外）；节点会在适当的时候阻塞在这里。
检查：这里调用了 setImmediate() 回调。
关闭回调：一些关闭回调，例如socket.on('关闭', ...).
前面的步骤如何适合这里？
因此，前面仅使用“回调队列”，然后使用“宏和微队列”的步骤是关于事件循环如何工作的抽象解释。
还有另一件重要的事情要提，事件循环应该在处理宏任务队列中的一个宏任务之后完全处理微任务队列。
第 1 步：事件循环将循环时间更新为当前执行的当前时间。
步骤2：执行微队列。
步骤 3：执行计时器阶段的任务。
第四步：检查微队列中是否有东西，如果有则执行整个微队列。
步骤5：返回步骤3，直到计时器阶段为空。
第 6 步：执行 Pending Callbacks 阶段的任务。
步骤7：检查微队列中是否有东西，如果有则执行整个微队列。
步骤 8：返回步骤 6，直到 Pending Callbacks 阶段为空。
然后空闲…微队列…轮询…微队列…检查…微队列…关闭回调，然后重新开始。
因此，我很好地概述了事件循环在幕后如何实际工作，有很多缺失的部分我在这里没有提到，因为实际文档在解释它方面做得很好，我将提供很好的链接文档，我鼓励您花 10-20 分钟来理解它们。
以上是事件循环的详细内容。更多信息请关注PHP中文网其他相关文章！
