事件循环 Event loop

2分钟阅读

A1. 要素 (核心零件)

  1. Call Stack (调用栈): 主跑道。所有的 JS 代码（函数）都在这里执行。后进先出 (LIFO)。
  2. Web APIs (浏览器能力): 幕后工人。负责 setTimeout 计时、fetch 网络请求、DOM 事件监听。它们独立于 JS 主线程运行。
  3. Callback Queue (任务队列): 候车室。异步操作完成后的回调函数（如 onload、then）在这里排队。
    • 进阶区分: 宏任务 (MacroTask): 比如 setTimeout, setInterval, I/O。
    • 进阶区分: 微任务 (MicroTask): 比如 Promise.then, process.nextTick

A2. 结构 (运行规则) 这是一个无限循环：

  1. 执行栈： 先把 Stack 里所有的同步代码跑完。
  2. 检查微任务： Stack 一空，立刻查看微任务队列（VIP 通道）。如果有，全部执行完。
  3. 执行宏任务： 微任务清空后，去宏任务队列拿一个任务推入 Stack 执行。
  4. 渲染： 浏览器决定是否重绘(Repaint)页面。
  5. 循环： 回到第 1 步。

A3. 系统 (涌现功能) 这个系统实现了**“非阻塞 I/O”**。JS 不会因为网络请求慢而卡死界面，它把耗时任务甩给浏览器（Web APIs），自己继续处理用户的点击，等数据回来了再处理数据。

console.log('1. 开始');
 
setTimeout(() => {
    console.log('2. 宏任务 (普通排队)');
}, 0);
 
Promise.resolve().then(() => {
    console.log('3. 微任务 (VIP插队)');
});
 
console.log('4. 结束');

输出顺序： 1 → 4 → 3 → 2 (注意：3 竟然在 2 前面，尽管 2 是先写的)

反向链接