深入理解 JavaScript 中的事件循环

引言：

JavaScript 的事件循环是一个广为人知的主题，但当我们从更宏观的角度来看，它实际上只是 JavaScript 运行时环境中的一个小组件。除了事件循环，我们还有 调用栈（Call Stack）、Web APIs、任务队列（Task Queue） 和 微任务队列（Microtask Queue）。这些组件一起工作，使得 JavaScript 能够在单线程的环境中高效地处理异步任务。

调用栈：JavaScript 执行的核心

JavaScript 本身是单线程的，这意味着它每次只能执行一个任务。调用栈用于管理代码的执行。每当我们执行一个新的操作，比如输出 console.log，一个新的执行上下文会被创建并推入调用栈中进行评估。

例如，以下代码执行时，console.log(1) 会被添加到调用栈，然后执行并输出 1。接下来，console.log(2) 被执行，依此类推。

单线程的限制：长时间运行任务的问题

由于 JavaScript 只有一个线程，如果我们有一个长时间运行的任务（例如复杂的计算），它会阻塞调用栈，直到任务完成。这就导致了整个程序的“冻结”现象。

Web APIs：解锁异步任务的强大功能

为了避免这种阻塞，JavaScript 使用 Web APIs 允许我们执行异步任务，如网络请求、定时器等。通过 Web APIs，我们可以将长时间运行的任务交给浏览器去处理，而不是阻塞主线程。

回调函数（Callback-based APIs）

Web APIs 提供的回调函数可以在异步任务完成后触发。例如，Geolocation API 允许我们获取用户的地理位置，操作是通过回调函数来处理的。

1. 使用 getCurrentPosition 方法获取地理位置。
2. 任务被加入调用栈，完成后会将回调函数推入任务队列（Task Queue）。
3. 事件循环负责检查调用栈并将任务从任务队列移入执行。

微任务队列（Microtask Queue）

与回调函数不同，Promise 基于微任务队列（Microtask Queue）进行异步操作。事件循环优先处理微任务队列中的任务，然后再处理任务队列。微任务队列专门处理 then、catch 和 finally 等回调。（字幕时间节点：6:22）

Promise 与微任务的优先级

当我们调用 fetch API 时，它返回一个 Promise，这个 Promise 在后台处理网络请求。当 Promise 完成时，它的回调会被推入微任务队列，并优先于其他任务执行。（字幕时间节点：7:09）

总结：事件循环、任务队列与微任务队列的工作原理

1. 调用栈：JavaScript 在每次只能执行一个任务时，使用调用栈来管理任务的执行。
2. Web APIs：通过 Web APIs 执行异步任务，避免阻塞调用栈。
3. 回调队列与微任务队列：回调队列用于普通的回调函数，而微任务队列优先处理 Promise 的回调函数。
4. 事件循环：事件循环不断检查调用栈是否为空，并优先处理微任务队列中的任务，然后再执行任务队列中的回调。

通过对事件循环和任务队列的理解，开发者可以更好地掌控 JavaScript 异步编程的工作原理，避免常见的陷阱。

小提示：

如果你还没有完全理解任务队列、微任务队列和事件循环的工作原理，建议你自己动手实践，使用 setTimeout 或 Promise 来观察不同任务的执行顺序。这样可以更深入地理解 JavaScript 的异步机制。

原文引自YouTube视频：https://www.youtube.com/watch?v=eiC58R16hb8