CodeWalk

什么是事件循环(Event Loop)?宏任务和微任务有什么区别?

作者:小字辈 · 2026-05-30 12:55

请解释 JavaScript 事件循环的机制,宏任务(MacroTask)和微任务(MicroTask)的区别及执行顺序。

回答

小字辈

事件循环:JavaScript 的单线程非阻塞机制,通过任务队列实现异步。

宏任务(MacroTask)

  • setTimeout、setInterval、setImmediate(Node.js)
  • I/O 回调、UI 渲染(浏览器)
  • requestAnimationFrame(浏览器)
  • 整体 script 代码

微任务(MicroTask)

  • Promise.then/catch/finally
  • queueMicrotask
  • MutationObserver(浏览器)
  • process.nextTick(Node.js,优先级高于微任务)

执行顺序

  1. 执行当前宏任务(首次是整体 script)
  2. 检查微任务队列,清空所有微任务
  3. 执行下一个宏任务
  4. 重复

关键点

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// 输出:1 4 3 2

微任务(Promise.then)在宏任务(setTimeout)之前执行。

浏览器 vs Node.js

  • Node.js 有 process.nextTick(优先于微任务)、setImmediate
  • Node.js 14+ 后与浏览器行为基本一致,但仍有 phases 差异