当前位置：首页 > JavaScript

js实现eventloop

2026-04-06 06:37:30JavaScript

Event Loop 的基本概念

Event Loop 是 JavaScript 运行时处理异步任务的核心机制。它负责调度和执行任务，确保非阻塞的代码运行。Event Loop 分为以下几个部分：

调用栈（Call Stack）：同步代码按顺序执行，函数调用会被压入栈中，执行完成后弹出。
任务队列（Task Queue）：异步任务（如 setTimeout、setInterval）完成后，回调函数会被放入任务队列。
微任务队列（Microtask Queue）：优先级更高，包含 Promise.then、MutationObserver 等回调。

Event Loop 的执行流程

执行同步代码：调用栈依次执行同步任务，遇到异步任务时交给 Web API 处理（如 setTimeout）。
处理微任务：当调用栈为空时，Event Loop 优先检查微任务队列并执行所有微任务。
渲染（如果需要）：浏览器可能会在此时进行 UI 渲染。
处理宏任务：从任务队列中取出一个宏任务（如 setTimeout 回调）执行，然后回到第 2 步。

代码示例

console.log('Start');

setTimeout(() => {
  console.log('Timeout callback');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise resolved');
});

console.log('End');

输出顺序：

js实现eventloop

Start
End
Promise resolved（微任务优先）
Timeout callback（宏任务）

关键点

微任务（如 Promise）比宏任务（如 setTimeout）优先级更高。
async/await 本质是 Promise 的语法糖，属于微任务。
渲染（如 requestAnimationFrame）的时机在微任务之后、宏任务之前。

常见面试题分析

setTimeout(() => console.log(1), 0);

Promise.resolve().then(() => {
  console.log(2);
  Promise.resolve().then(() => console.log(3));
});

console.log(4);

输出顺序：4 → 2 → 3 → 1。原因：微任务队列会一次性清空，嵌套的 Promise 仍属于微任务。