当前位置：首页 > JavaScript

js实现eventloop

2026-04-06 06:37:30JavaScript

js实现eventloop

Event Loop 的基本概念

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

js实现eventloop

调用栈（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');

输出顺序：

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 仍属于微任务。