Event Loop: Behind the Scenes of Modern Web Apps

Event Loop：现代 Web 应用程序背后的秘密

在理解现代 Web 应用程序的复杂性时，Event Loop (事件循环) 是一个至关重要的概念。它充当应用程序和浏览器之间的中间人，负责协调各种任务，从处理用户交互到更新 UI。

事件循环的工作原理

Event Loop 本质上是一个无限循环，它不断监视浏览器环境中的事件。当发生事件时，例如用户单击按钮或页面加载完成，它会被推入事件队列。

事件循环然后会从队列中取出事件并将其推入调用栈。调用栈是一组正在执行的任务的堆栈，它控制着一次只能执行一项任务的单线程特性。

当任务完成时，它将从调用栈中弹出，Event Loop 继续从队列中获取下一个事件。

宏任务和微任务

Event Loop 区分两种主要的任务类型：宏任务和微任务。

• 宏任务 ：这些是较重的任务，例如脚本、 setTimeout 和 setInterval。
• 微任务 ：这些是较轻的任务，例如 Promise、MutationObserver 和 async/await 回调。

Event Loop 会优先处理微任务，这意味着微任务将在宏任务之前执行，即使它们稍后进入队列。

浏览器渲染

Event Loop 在控制页面何时渲染中发挥着至关重要的作用。它通过将任务推入调用栈，确保在脚本和微任务执行后才会进行渲染。

这防止了浏览器在不必要的渲染中浪费资源，并确保用户体验平滑。

例子

为了理解 Event Loop 的作用，考虑以下代码：

console.log("任务 1");
setTimeout(() => console.log("宏任务"), 0);
Promise.resolve().then(() => console.log("微任务"));
console.log("任务 2");

输出将如下所示：

任务 1
任务 2
微任务
宏任务

如你所见，Event Loop 首先执行宏任务（任务 1 和任务 2），然后是微任务（Promise 回调），最后是宏任务（setTimeout 回调）。

结论

Event Loop 是现代 Web 应用程序的核心。它负责协调事件，管理任务执行，并控制页面渲染。理解 Event Loop 的工作原理对于优化应用程序性能和提供流畅的用户体验至关重要。