js eventloop实现

Event Loop 的基本概念

JavaScript 的 Event Loop 是一种机制，用于处理异步任务和事件回调。它基于单线程模型，通过任务队列（Task Queue）和微任务队列（Microtask Queue）来调度任务执行顺序。

核心组成部分

• 调用栈（Call Stack）：用于执行同步代码，遵循先进后出（LIFO）原则。
• 任务队列（Task Queue）：存放宏任务（如 setTimeout、setInterval、I/O 操作）。
• 微任务队列（Microtask Queue）：存放微任务（如 Promise.then、MutationObserver）。

执行流程

1. 同步代码进入调用栈执行，遇到异步任务时，将回调函数注册到对应的队列。
2. 调用栈清空后，优先检查微任务队列并执行所有微任务。
3. 微任务队列清空后，从任务队列中取出一个宏任务执行。
4. 重复上述过程，形成事件循环。

代码示例

console.log("Start"); // 同步任务

setTimeout(() => {
  console.log("Timeout"); // 宏任务
}, 0);

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

console.log("End"); // 同步任务

输出顺序：

Start  
End  
Promise  
Timeout

关键点

• 微任务优先级高于宏任务。
• process.nextTick（Node.js）和 MutationObserver 的优先级高于普通微任务。
• 避免长时间运行的同步代码阻塞事件循环。

常见宏任务与微任务

• 宏任务：setTimeout、setInterval、requestAnimationFrame、I/O。
• 微任务：Promise.then、queueMicrotask、MutationObserver。

通过理解 Event Loop 的机制，可以更好地优化异步代码的执行顺序和性能。