用显微镜剖析事件循环，找出前端开发中的蛛丝马迹

前端

2024-01-03 03:24:23

事件循环：JavaScript 的引擎室

想象一下你的浏览器是一个繁忙的城市，事件不断发生，就像车辆穿梭于街道。JavaScript 引擎就是交通指挥员，管理着这些事件的流动，让你的应用程序顺利运行。这个管理机制就是事件循环。

什么是事件循环？

事件循环是一个不断循环的过程，它从一个队列中检索事件并执行相应的处理程序。这个队列遵循先进先出 (FIFO) 原则，这意味着最早添加的事件将首先得到处理。

当一个事件发生时，它会被添加到队列中。这些事件可能是用户交互、网络请求或计时器到期。事件循环不断监控队列，一旦队列不为空，它就会执行事件并调用相应的处理程序。

宏任务与微任务

事件循环将任务划分为两类：宏任务和微任务。

宏任务 是耗时的任务，例如网络请求、DOM 操作和计时器。它们需要花费较长时间才能完成。

微任务 是快速执行的任务，例如 Promises、回调和 MutationObserver。它们几乎立即完成。

微任务具有更高的优先级，这意味着在执行宏任务之前，事件循环会先处理微任务。

事件循环在前端开发中的重要性

事件循环对于前端开发至关重要，因为它影响代码的执行顺序和用户体验。

网络请求： 网络请求是宏任务。当浏览器接收到一个网络请求时，它会将请求添加到事件队列中。当响应返回时，事件循环会触发一个事件，执行响应处理程序并更新 UI。
DOM 操作： DOM 操作也是宏任务。当你在页面上点击一个按钮或修改 DOM 元素时，浏览器会将操作添加到事件队列中。当 DOM 操作完成时，事件循环会触发一个事件，执行事件处理程序并更新 UI。
计时器： 计时器是宏任务。当你在页面上设置一个计时器时，浏览器会创建一个计时器对象并将其添加到事件队列中。当计时器触发时，事件循环会执行事件处理程序，执行计时器回调。
动画： 动画是宏任务。当你在页面上创建动画时，浏览器会创建一个动画对象并将其添加到事件队列中。当动画状态更新时，事件循环会执行事件处理程序并更新 UI。

示例代码

以下是展示事件循环和宏任务/微任务优先级的代码示例：

console.log('Start'); // 立即执行

setTimeout(() => {
  console.log('宏任务');
}, 0); // 宏任务，延迟 0 毫秒执行

Promise.resolve().then(() => {
  console.log('微任务');
}); // 微任务，立即执行

console.log('End'); // 立即执行