JavaScript 事件循环(Event Loop)是 JavaScript 运行时环境(如浏览器和 Node.js)中处理异步操作的核心机制。它负责执行异步代码、调度任务和处理事件。事件循环的工作原理可以分为以下几个步骤:
执行同步代码:首先,事件循环会执行当前调用栈(Call Stack)中的所有同步代码。这些代码会按照它们在代码中出现的顺序依次执行。
处理微任务(Microtasks):当调用栈为空时,事件循环会检查微任务队列(Microtask Queue)。微任务是一种特殊的异步任务,它们需要在当前任务完成后立即执行。常见的微任务包括 Promise 回调和 MutationObserver 回调。事件循环会依次执行微任务队列中的所有任务,直到队列为空。
执行宏任务(Macrotasks):当微任务队列为空时,事件循环会从宏任务队列(Macrotask Queue)中选择一个任务执行。宏任务是一种相对较重的异步任务,例如 setTimeout、setInterval、I/O 操作和 UI 渲染等。事件循环会按照它们在队列中出现的顺序执行宏任务。每个宏任务执行完毕后,事件循环会再次检查微任务队列,执行其中的所有任务。
渲染:在执行完一个宏任务并处理完所有微任务后,浏览器会进行一次渲染操作,将页面更新显示给用户。这一步不是每次事件循环都会发生,而是在特定条件下触发,例如在执行完一个宏任务后,或者主动调用 requestAnimationFrame 时。
继续下一轮事件循环:事件循环会不断重复上述步骤,直到所有的任务都被执行完毕。
需要注意的是,不同浏览器和 JavaScript 引擎可能会有细微的事件循环实现差异。但总体来说,上述描述的事件循环工作原理在大多数情况下都是适用的。