前端事件循环与微任务：从 setTimeout 到 Promise 的底层执行顺序

1
console.log('script start');
2

3
setTimeout(() => console.log('setTimeout'), 0);
4
Promise.resolve().then(() => console.log('promise1'));
5
requestAnimationFrame(() => console.log('rAF'));
6

7
Promise.resolve().then(() => {
8
  console.log('promise2');
9
  queueMicrotask(() => console.log('inner microtask'));
10
});
11

12
console.log('script end');

1
script start
2
script end
3
promise1
4
promise2
5
inner microtask
6
setTimeout
7
rAF

1
button.addEventListener('click', () => {
2
  Promise.resolve().then(() => {
3
    // 1 秒的微任务
4
    const start = performance.now();
5
    while (performance.now() - start < 1000) {}
6
    console.log('微任务结束');
7
  });
8
  console.log('点击处理结束');
9
});
10
// 用户会感觉页面"卡了一下"——渲染被推迟了

1
setTimeout(() => console.log('timeout'), 0);
2
setImmediate(() => console.log('immediate'));
3
// 顺序不定！取决于 Node 启动时机器负载

1
const fs = require('fs');
2
fs.readFile(__filename, () => {
3
  setTimeout(() => console.log('timeout'), 0);
4
  setImmediate(() => console.log('immediate'));
5
  // 永远 immediate 先（poll 阶段后立即到 check 阶段）
6
});

1
process.nextTick(() => console.log('nextTick'));
2
Promise.resolve().then(() => console.log('promise'));
3
// 输出 nextTick 在前

1
async function test() {
2
  console.log(1);
3
  await 42;          // 等价于 await Promise.resolve(42)
4
  console.log(2);
5
}
6
test();
7
console.log(3);
8
// 输出 1 3 2

1
async function foo() {
2
  try {
3
    await Promise.reject('error');
4
  } catch (e) {
5
    console.log('caught', e);
6
  }
7
  console.log('after catch');
8
}
9
foo();
10
console.log('sync');
11
// sync  → caught error → after catch

1
console.log(1);
2
setTimeout(() => console.log(2));
3
Promise.resolve().then(() => console.log(3));
4
queueMicrotask(() => console.log(4));
5
console.log(5);

1
setTimeout(() => console.log(1), 0);
2
new Promise(resolve => {
3
  console.log(2);
4
  resolve();
5
}).then(() => console.log(3));
6
console.log(4);

1
async function f() {
2
  console.log(1);
3
  await f();
4
}
5
f().catch(() => console.log('error'));

1
async function foo() {
2
  return 1;       // 包装成 Promise.resolve(1)
3
}
4
console.log(foo());  // 同步执行

1
setImmediate(() => console.log('immediate'));
2
setTimeout(() => console.log('timeout'), 0);
3
process.nextTick(() => console.log('nextTick'));
4
Promise.resolve().then(() => console.log('promise'));

1
queueMicrotask(() => console.log('m1'));
2
queueMicrotask(() => console.log('m2'));
3
Promise.resolve().then(() => console.log('p1'));

1
console.log('a');
2
requestAnimationFrame(() => console.log('b'));
3
queueMicrotask(() => console.log('c'));
4
setTimeout(() => console.log('d'), 0);

1
button.addEventListener('click', () => {
2
  console.log('handler');
3
  Promise.resolve().then(() => console.log('microtask'));
4
  setTimeout(() => console.log('macrotask'), 0);
5
});

1
const p = Promise.resolve();
2
p.then(() => console.log(1));
3
p.then(() => console.log(2));
4
p.then(() => console.log(3));

1
Promise.resolve().then(() => {
2
  return Promise.resolve(42);   // 返回 Promise
3
}).then(v => console.log(v));

1
async function t1() {
2
  await t2();
3
  console.log('t1');
4
}
5
async function t2() {
6
  console.log('t2');
7
}
8
t1();
9
Promise.resolve().then(() => console.log('p1'));
10
console.log('sync');

1
console.log(1);
2
setTimeout(() => {
3
  console.log(2);
4
  Promise.resolve().then(() => console.log(3));
5
}, 0);
6
Promise.resolve().then(() => {
7
  console.log(4);
8
  setTimeout(() => console.log(5), 0);
9
});
10
console.log(6);

1
const fs = require('fs');
2
fs.readFile(__filename, () => {
3
  setTimeout(() => console.log('timeout'), 0);
4
  setImmediate(() => console.log('immediate'));
5
  process.nextTick(() => console.log('nextTick'));
6
  Promise.resolve().then(() => console.log('promise'));
7
});

1
Promise.resolve(1)
2
  .then(v => { console.log(v); return v + 1; })
3
  .then(v => { console.log(v); return v + 1; })
4
  .then(v => { console.log(v); });

1
Promise.resolve()
2
  .then(() => { throw new Error('A'); })
3
  .catch(e => console.log('catch', e.message))
4
  .then(() => console.log('after catch'));

1
const obs = new MutationObserver(() => console.log('mutation'));
2
obs.observe(document.body, { childList: true });
3
document.body.appendChild(document.createElement('div'));
4
Promise.resolve().then(() => console.log('promise'));

1
queueMicrotask(() => {
2
  throw new Error('micro error');
3
});
4
queueMicrotask(() => console.log('next'));

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

1
let ticking = false;
2
window.addEventListener('scroll', () => {
3
  if (!ticking) {
4
    requestAnimationFrame(() => {
5
      updatePosition();
6
      ticking = false;
7
    });
8
    ticking = true;
9
  }
10
});

1
// 状态批量更新
2
function setState(newState) {
3
  state = newState;
4
  if (!pending) {
5
    pending = true;
6
    queueMicrotask(() => {
7
      flushState();
8
      pending = false;
9
    });
10
  }
11
}

1
// ❌ 死循环
2
function recurse() {
3
  Promise.resolve().then(recurse);
4
}
5
recurse();
6

7
// ✅ 改用 setTimeout
8
function recurse(i) {
9
  if (i < 1000) setTimeout(() => recurse(i + 1), 0);
10
}
11
recurse(0);