揭秘 JavaScript 事件循环机制：通俗易懂的深入解析

2023-12-04 04:30:31

绪论

作为现代网络开发的基石，JavaScript 强大的异步编程功能使其能够同时处理多个任务，而不会阻塞用户界面。这一切都归功于其独一无二的事件循环机制。了解事件循环对于掌握 JavaScript 的精髓至关重要。本文将以通俗易懂的方式，深入解析这一复杂机制。

同步任务与异步任务

在 JavaScript 中，任务可以分为同步任务和异步任务。

同步任务： 立即执行，在完成前会阻塞主线程。例如，变量声明、函数调用等。
异步任务： 在主线程执行完毕后才执行，不会阻塞主线程。例如，网络请求、定时器、事件监听器等。

任务队列

JavaScript 维护着一个称为“任务队列”的数据结构，它负责管理未完成的任务。当同步任务执行完毕后，它会将异步任务添加到任务队列中。

事件循环

事件循环是一个不断运行的循环，它从任务队列中获取任务并执行它们。事件循环的步骤如下：

执行所有同步任务： 主线程执行任务队列中的所有同步任务。
执行所有微任务： 事件循环会检查是否有微任务（例如 Promise），如果存在，则优先执行它们。
检查消息队列： 事件循环会检查浏览器是否有新的事件，如果有，则将它们添加到任务队列中。
返回到步骤 1： 事件循环从任务队列中获取下一个任务，并重复步骤 1-3，直到任务队列为空。

深入剖析任务队列

任务队列并不是一个简单的队列，而是由以下两个队列组成：

宏任务队列： 存储异步任务，例如 setTimeout()、setInterval() 和网络请求。
微任务队列： 存储微任务，例如 Promise、MutationObserver 和 queueMicrotask()。

微任务队列优先级高于宏任务队列，这意味着当微任务可用时，事件循环会优先执行它们。

示例：事件循环在实际场景中的工作原理

以下代码演示了事件循环如何在实际场景中工作：

console.log("同步任务 1"); // 输出：同步任务 1

setTimeout(() => {
  console.log("异步任务 1"); // 输出：异步任务 1
}, 0);

Promise.resolve().then(() => {
  console.log("微任务 1"); // 输出：微任务 1
});

console.log("同步任务 2"); // 输出：同步任务 2