Event Loop 的机制与原理，一文读懂程序事件执行机制

Event Loop 的概览

Event Loop 是 JavaScript 的核心之一，它负责协调和管理所有异步任务的执行。当我们编写 JavaScript 代码时，程序不会立即执行所有代码，而是将它们放入一个称为“消息队列”的地方。消息队列是一个先进先出的队列，这意味着最早进入队列的任务也将最先执行。

消息队列与任务执行

当主线程空闲时，它会从消息队列中取出任务并执行。任务可以是宏任务或微任务。宏任务包括脚本代码、setTimeout() 和 setInterval() 函数调用，而微任务包括 Promise.then() 和 MutationObserver 回调。

宏任务和微任务的执行顺序遵循以下规则：

• 主线程先执行所有宏任务，然后才执行微任务。
• 同一轮 Event Loop 中，微任务会在所有宏任务执行完毕后立即执行，即使在此期间有新的宏任务进入队列。

延迟队列与 rAF/rIC

除了消息队列外，Event Loop 中还存在一个延迟队列。延迟队列用于存储那些需要在特定时间或延迟一定时间后执行的任务。当延迟队列中的任务达到执行时间时，它们会被转移到消息队列中，等待主线程执行。

requestAnimationFrame (rAF) 和 requestIdleCallback (rIC) 是两个用于在浏览器渲染循环中执行任务的 API。rAF 在每次浏览器重绘之前执行任务，而 rIC 则在浏览器空闲时执行任务。这两个 API 都将任务添加到延迟队列中，然后由 Event Loop 负责执行。

渲染时机与更新渲染

当浏览器准备好更新渲染时，它会触发一个称为“渲染时机”的事件。渲染时机通常与浏览器的刷新率相关，在大多数浏览器中为 60 Hz，即每秒 60 次。在渲染时机发生时，浏览器会将页面中的所有更改都应用到渲染树中，然后重新绘制页面。

Event Loop 的应用

Event Loop 在 JavaScript 中有着广泛的应用，包括：

• 动画和交互：Event Loop 使我们能够创建流畅的动画和交互，因为这些任务都是在主线程中执行的，因此可以立即响应用户输入。
• 异步编程：Event Loop 使我们能够在不阻塞主线程的情况下执行异步任务，这使得 JavaScript 非常适合构建响应式和高性能的应用程序。
• 事件处理：Event Loop 用于处理来自用户交互、网络请求和其他事件源的事件。通过将事件放入消息队列，我们可以确保事件得到有序处理，并防止主线程被阻塞。

结语

Event Loop 是 JavaScript 中的一个关键概念，它负责协调和管理所有异步任务的执行。理解 Event Loop 的工作原理可以帮助我们编写出更有效率和更响应的 JavaScript 代码。