JavaScript 的事件循环：揭开异步的面纱

前端

2024-02-09 05:36:56

众所周知，JavaScript 是一种单线程语言，这意味着它无法进行多线程编程。然而，JavaScript 无处不在的异步概念使得理解多线程变得尤为重要。深入了解 JavaScript 的事件循环是解开异步之谜的关键。

事件循环的奥秘

事件循环是一个不停运转的机制，负责管理 JavaScript 的任务队列。它负责调度事件，这些事件可能是用户交互（例如点击或滚动）、网络请求或定时器。事件循环按以下步骤工作：

处理主线程： 执行当前任务，通常是浏览器渲染或用户交互。
执行宏任务（Macrotasks）： 这些是需要较长时间才能执行的任务，如 DOM 更新或网络请求。它们被添加到主线程任务队列。
检查微任务队列（Microtasks）： 微任务是比宏任务更优先执行的任务，如 Promises 或 MutationObserver 回调。它们会被立即执行。
返回主线程： 继续执行主线程任务。

宏任务和微任务的奥秘

宏任务： 由 setTimeout(), setInterval() 或 UI 渲染触发。它们在主线程任务队列中排队，按先进先出的顺序执行。
微任务： 由 Promises 或 MutationObserver 触发。它们具有更高的优先级，会在宏任务之间执行。这确保了即使在宏任务执行期间，用户交互也能得到及时响应。

示例代码

console.log('start');

setTimeout(() => console.log('timeout'), 0);

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

console.log('end');

执行结果：

start
promise
end
timeout

在上面的示例中，JavaScript 引擎首先执行 console.log('start')。然后，它将 setTimeout() 回调（宏任务）添加到任务队列。接着，它执行 Promise 回调（微任务），因为它具有更高的优先级。最后，它返回主线程并执行 console.log('end')。在主线程任务队列处理完后，setTimeout() 回调才被执行。

了解事件循环的重要性

理解 JavaScript 的事件循环对于以下方面至关重要：