Event Loop揭秘：同步、异步，宏任务、微任务，浏览器与Node环境的背后故事

前端

2023-11-15 01:40:58

掌握 Event Loop 的秘密：同步、异步、宏任务和微任务

作为一名前端开发者，掌握 Event Loop 至关重要，因为它决定了代码的执行顺序，从而影响程序的性能。本文将深入浅出地讲解 Event Loop 的概念，帮助你了解其工作原理及其对浏览器和 Node.js 环境的影响。

1. 什么是 Event Loop？

Event Loop 是一个消息队列，负责处理事件。当事件发生时，它会被放入队列中。然后，一个事件循环会不断从队列中取出事件并执行它们。

2. 同步与异步

2.1 同步

同步任务是指在执行过程中不会中断其他任务执行的任务。例如，当你在浏览器中输入网址时，浏览器会等待服务器的响应，然后渲染页面。此时，其他任务（例如用户交互）会被阻塞。

2.2 异步

异步任务是指在执行过程中可以中断其他任务执行的任务。它们通常使用回调函数完成，并且不会阻塞主线程。

3. 宏任务和微任务

Event Loop 中的任务分为两种类型：宏任务和微任务。

3.1 宏任务

宏任务是指需要较长时间执行的任务，例如网络请求、定时器和 DOM 操作。

3.2 微任务

微任务是指需要较短时间执行的任务，例如 Promise 的 then() 方法、MutationObserver 的回调函数和 setTimeout 的回调函数（延迟时间为 0）。

4. 浏览器与 Node.js 环境

浏览器环境和 Node.js 环境中 Event Loop 的工作原理存在差异。

4.1 浏览器环境

在浏览器中，Event Loop 分为宏任务阶段和微任务阶段。宏任务阶段先执行，然后才是微任务阶段。

4.2 Node.js 环境

在 Node.js 中，Event Loop 只有一个阶段，既包含宏任务也包含微任务。但是，微任务会立即在宏任务执行后执行。

代码示例：

// 浏览器环境
setTimeout(() => {
  console.log('宏任务');
}, 0);

Promise.resolve().then(() => {
  console.log('微任务');
});

// Node.js 环境
setTimeout(() => {
  console.log('宏任务');
}, 0);

setImmediate(() => {
  console.log('微任务');
});