何谓事件循环？

2023-12-24 14:57:20

一、前言

事件循环（Event Loop）是前端及JavaScript中一个非常重要的基础概念，也是平时的讨论或面试中一个非常高频的话题。理解JavaScript的事件循环往往伴随着宏任务和微任务这两个概念，它是JavaScript实现异步编程的核心机制，负责管理和执行各种异步任务。本文将带你了解事件循环的概念、运行机制，以及如何应用它来理解异步编程。此外，我们还将探讨事件循环与任务队列之间的关系，以及宏任务和微任务之间的区别。

二、事件循环的概念

事件循环（Event Loop）是一个循环运行的机制，它不断检查是否有新的事件或任务需要执行。当有新的事件或任务时，事件循环会将它们添加到一个队列中，然后逐个执行队列中的任务。这个过程会一直重复，直到没有更多的任务需要执行。

三、事件循环的运行机制

事件循环的运行机制可以分为以下几个步骤：

轮询阶段（Polling Phase）： 事件循环首先会进入轮询阶段。在这个阶段，它会检查是否有新的事件或任务需要执行。如果发现了新的事件或任务，则会将它们添加到一个队列中。
任务执行阶段（Task Execution Phase）： 在轮询阶段结束后，事件循环会进入任务执行阶段。在这个阶段，它会依次执行队列中的任务。每个任务都会被分配一个固定的时间片，在这个时间片内，任务必须完成执行。如果任务在时间片内没有完成执行，则会自动中断，并在下一个事件循环中继续执行。
渲染阶段（Rendering Phase）： 在任务执行阶段结束后，事件循环会进入渲染阶段。在这个阶段，它会将更新后的DOM（Document Object Model）渲染到浏览器窗口中。

四、事件循环与任务队列

事件循环与任务队列是两个紧密相关的概念。任务队列是一个存储任务的容器，而事件循环负责执行这些任务。事件循环会不断轮询任务队列，如果有新的任务添加到队列中，则会将其添加到事件循环中。当事件循环执行任务时，它会从任务队列中取出一个任务并执行它。

五、宏任务与微任务

在事件循环中，任务被分为宏任务和微任务。宏任务包括脚本执行、setTimeout、setInterval等；微任务包括Promise.then、MutationObserver、process.nextTick等。宏任务和微任务的区别在于，宏任务会在当前事件循环中的任务执行阶段执行，而微任务会在当前事件循环中的渲染阶段执行。这意味着，微任务会比宏任务先执行。