什么是事件循环(Event Loop)?宏任务和微任务有什么区别?
请解释 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,优先级高于微任务)
执行顺序:
- 执行当前宏任务(首次是整体 script)
- 检查微任务队列,清空所有微任务
- 执行下一个宏任务
- 重复
关键点:
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 差异