深入理解 JavaScript Event Loop：从原理到实战全解析

1. 什么是 Event Loop？

Event Loop（事件循环）是 JavaScript 实现异步非阻塞编程的核心机制。它通过"执行栈 + 任务队列"协调同步与异步任务，确保 JavaScript 虽然是单线程语言，但仍可高效响应用户交互与 I/O 请求。

📌 三个核心特性

单线程：同一时刻 JavaScript 只能执行一段代码
非阻塞：通过异步任务延后执行，避免阻塞主线程
事件驱动：一切基于事件与回调函数

2. JavaScript 为什么是单线程？

JavaScript 是为浏览器环境设计的，单线程模型具有以下优势：

✅ 原因分析

DOM 安全
- DOM 是共享资源，防止多线程引发数据竞争。
简化模型
- 避免锁机制和线程同步，简化开发。
性能考虑
- 减少上下文切换的系统开销。

⚠️ 单线程的挑战

同步任务若耗时，会阻塞页面
UI 渲染、事件响应都在主线程
用户体验易受长任务影响

🧠 示例演示

javascript 复制代码

// 阻塞主线程（不推荐）
while (true) {
  console.log("页面已卡死");
}

// 异步非阻塞（推荐）
setTimeout(() => {
  console.log("异步执行");
}, 0);

3. 同步与异步任务机制

🧱 同步任务

在主线程中立即执行，会阻塞后续代码。

arduino 复制代码

console.log('1');
console.log('2');
console.log('3');
// 输出顺序：1, 2, 3

🚀 异步任务

异步任务会被推入任务队列，由 Event Loop 在合适时机调度执行。

常见异步 API：

setTimeout / setInterval
fetch
Promise.then
MutationObserver

4. 宏任务与微任务详解

⏰ 宏任务（Macro Task）

每轮 Event Loop 执行一个宏任务
来源于宿主环境（浏览器/Node）

常见宏任务：

整体 script
setTimeout
I/O 回调
setImmediate（Node）

🔬 微任务（Micro Task）

每轮宏任务结束后执行所有微任务
优先级更高

常见微任务：

Promise.then
queueMicrotask
MutationObserver
process.nextTick（Node）

🧠 执行优先级总结

同步任务 > 所有微任务 > 一个宏任务 > 所有微任务 > 下一个宏任务 > ...

📊 流程图：任务分类结构图

5. 执行顺序与流程图

🧭 执行步骤

执行所有同步任务
清空微任务队列
执行一个宏任务
清空微任务队列
继续下一轮事件循环

🖼️ Event Loop 执行流程图

6. 常见示例代码解析

示例 1

javascript 复制代码

console.log('script start');

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

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

console.log('script end');

✅ 输出顺序：

arduino 复制代码

script start
script end
promise
setTimeout

示例 2

javascript 复制代码

console.log('开始');

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

queueMicrotask(() => {
  console.log('microtask');
});

console.log('结束');

✅ 输出：

复制代码

开始
结束
microtask
promise1

7. 浏览器 vs Node.js 的执行差异

📦 Node.js 示例

javascript 复制代码

console.log('Start');

process.nextTick(() => {
  console.log('nextTick');
});

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

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

✅ 输出顺序：

javascript 复制代码

Start
nextTick
Promise
setTimeout

✅ 对比总结

环境	特有机制	微任务优先级
浏览器	MutationObserver	Promise > queueMicrotask
Node.js	process.nextTick	process.nextTick > Promise

📈 Node.js 执行顺序图

8. Event Loop 实战技巧

🎯 场景 1：DOM 优化

ini 复制代码

queueMicrotask(() => {
  element.textContent = '更新成功';
});

🎯 场景 2：批量数据处理

javascript 复制代码

async function processData(data) {
  for (let i = 0; i < data.length; i += 100) {
    await processBatch(data.slice(i, i + 100));
    await new Promise(r => setTimeout(r, 0));
  }
}

🎯 场景 3：性能监控

ini 复制代码

function monitor(task) {
  const start = performance.now();
  queueMicrotask(() => {
    const cost = performance.now() - start;
    if (cost > 16) {
      console.warn('任务耗时过长:', cost);
    }
  });
}

9. 面试高频题与答题技巧

❓ 题目：输出顺序

javascript 复制代码

console.log('1');

setTimeout(() => {
  console.log('2');
  Promise.resolve().then(() => {
    console.log('3');
  });
}, 0);

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

console.log('5');

✅ 正确输出：

复制代码

🧠 答题技巧：

先执行同步任务（1、5）
Promise 的 then 属于微任务（4）
setTimeout 属于宏任务，执行后再调度微任务（3）

10. 性能优化建议

✅ 拆分任务，避免长时间阻塞

ini 复制代码

async function heavy() {
  for (let i = 0; i < 10000; i++) {
    doSomething(i);
    if (i % 100 === 0) {
      await new Promise(r => setTimeout(r, 0));
    }
  }
}

✅ 微任务更新 DOM

ini 复制代码

queueMicrotask(() => {
  element.style.display = 'none';
  element.textContent = '更新完毕';
});

11. 总结与记忆口诀

📌 关键点

单线程语言，事件循环协助异步编程
同步任务 > 微任务 > 宏任务
微任务清空优先，宏任务分阶段调度
实战中可用于性能优化与线程让渡

🧠 一句话记忆法

"同步先，微全清，一宏来，再清微"

感谢阅读，如果觉得有帮助，欢迎点赞、收藏、关注我，获取更多前端底层机制解析 🙌