布鲁斯前端JS面试题目 - 事件循环与异步操作

（一）什么是事件循环（Event Loop）？

解答：

1. 微任务与宏任务：

   JavaScript 是单线程语言，一次只能做一件事。为了处理异步，JavaScript 将任务分为两类：

   • Microtask（微任务）： 比如 Promise.then、queueMicrotask、MutationObserver
   • Macrotask（宏任务）： 比如 setTimeout、setInterval、MessageChannel、Node.js 中的 setImmediate

   执行顺序是「同步代码 → 所有 microtask → 一个 macrotask → 重复」

2. Node.js 与浏览器的差异：

   在浏览器中，每轮事件循环会先执行所有同步代码与 microtask，然后再从 macrotask queue 中取出一个执行。

   在 Node.js 中，事件循环分为六大阶段：timers → pending callbacks → poll → check → close callbacks，每个阶段结束都会先跑 process.nextTick 与 Promise 的 microtask。

   • process.nextTick：Node.js 专有，优先级最高
   • Promise.then：属于 microtask，优先于 macrotask
   • setImmediate：只存在于 Node.js，在 check 阶段执行

（二）事件循环顺序

console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');

解答：输出A → D → C → B

• 1. 先执行同步代码，印出 A 和 D
• 2. setTimeout 是 macrotask，会被放到下一轮事件循环
• 3. Promise.then 是 microtask，会在同步代码后立即执行，印出 C
• 4. 最后才执行 setTimeout 的 callback，印出 B

（三）setTimeout vs setImmediate 的异步行为

setTimeout(() => console.log('timeout'), 0);
setImmediate(() => console.log('immediate'));

解答：输出顺序不固定（可能是 timeout → immediate，也可能是 immediate → timeout）

• 解释：这段代码没有包在 I/O callback 里，所以执行的先后顺序无法保证，取决于执行环境与事件循环调度时机。
• setTimeout 在 timers 阶段
• setImmediate 在 check 阶段
• 因为这段代码没有包在 I/O callback 里，所以执行的先后顺序无法保证，取决于执行环境与事件循环调度时机。

（四）nextTick vs Promise

process.nextTick(() => console.log('tick'));
Promise.resolve().then(() => console.log('promise'));
console.log('sync');

解答：输出sync → tick → promise

• 1. 同步代码先执行，印出 sync
• 2. process.nextTick 优先于所有 microtask，印出 tick
• 3. Promise.then 是 microtask，最后执行并印出 promise

（五）Promise in setTimeout

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

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

解答：输出4 → 3 → 1 → 2

• 1. 先执行同步代码，印出 4
• 2. Promise.then 是 microtask，立即执行并印出 3
• 3. setTimeout 是 macrotask，在下一轮事件循环执行，印出 1
• 4. setTimeout 内的 Promise.then 会在 setTimeout 执行完后立即执行，印出 2

（六）async/await 与事件循环

async function foo() {
  console.log('A');
  await Promise.resolve();
  console.log('B');
}

console.log('C');
foo();
console.log('D');

解答：输出C → A → D → B

解析：async/await 会在 await 处中断，将后续逻辑作为 microtask 进入 queue。

（七）setTimeout + Promise + async/await 混合执行顺序

console.log('start');

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

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

(async () => {
  console.log('async1 start');
  await Promise.resolve();
  console.log('async1 end');
})();

console.log('end');

解答：输出start → async1 start → end → promise → async1 end → timeout