eventloop js实现
Event Loop 的 JavaScript 实现
JavaScript 的 Event Loop 是单线程异步编程的核心机制，负责协调调用栈、微任务队列和宏任务队列的执行顺序。以下是其核心实现逻辑：
调用栈与任务队列
调用栈（Call Stack）用于跟踪当前执行的函数，遵循后进先出原则。当栈为空时，Event Loop 会检查任务队列。
任务分为宏任务（如 setTimeout）和微任务（如 Promise），分别进入不同的队列：
- 宏任务队列：
script整体代码、setTimeout、setInterval、I/O 操作等。 - 微任务队列：
Promise.then、MutationObserver、queueMicrotask。
Event Loop 处理流程
- 执行当前调用栈中的同步代码，直至栈空。
- 处理微任务队列：依次执行所有微任务，直到队列为空。如果微任务中又产生新的微任务，会继续执行。
- 渲染更新（浏览器环境下）：执行 UI 渲染、布局、绘制等操作。
- 从宏任务队列取出一个任务（如最早的
setTimeout回调）执行，回到步骤 1。
简单代码模拟
// 模拟宏任务和微任务队列
const macroTaskQueue = [];
const microTaskQueue = [];
// 模拟 Event Loop
function eventLoop() {
// 执行所有微任务
while (microTaskQueue.length) {
const task = microTaskQueue.shift();
task();
}
// 执行一个宏任务
if (macroTaskQueue.length) {
const task = macroTaskQueue.shift();
task();
}
// 循环检查
setTimeout(eventLoop, 0);
}
// 启动 Event Loop
eventLoop();
// 示例：添加任务
macroTaskQueue.push(() => {
console.log('宏任务 1');
microTaskQueue.push(() => console.log('微任务 1'));
});
macroTaskQueue.push(() => console.log('宏任务 2'));关键特性
- 微任务优先级高于宏任务：每次调用栈清空后，会先彻底清空微任务队列。
- 避免阻塞：长时间同步代码会阻塞 Event Loop，导致界面卡顿。
process.nextTick（Node.js）：优先级高于微任务，属于当前阶段立即执行。
实际应用场景
- 异步顺序控制：通过
Promise确保逻辑在微任务阶段执行。 - 批量 UI 更新：将 DOM 操作合并到一次宏任务中减少重绘。
- 高优先级任务：使用
queueMicrotask插队执行紧急任务。
理解 Event Loop 的优先级和队列机制，可以避免常见的异步陷阱（如 setTimeout 延迟不精确）。
