Chrome 事件循环中宏任务和微任务到底怎么执行？

Chrome 的事件循环可以先记一句话：同步代码先进调用栈，栈清空后清空微任务，然后浏览器选择是否渲染，再执行下一个宏任务。宏任务包括 script、setTimeout、用户事件等；微任务包括 Promise.then、queueMicrotask、MutationObserver。微任务优先级高，但太多会让渲染一直没机会发生。

追问

setTimeout(fn, 0) 为什么不是立刻执行？

它只是把回调放进宏任务队列，必须等当前同步代码和本轮微任务执行完。后台标签页和嵌套定时器还可能被节流。

Promise.then 和 requestAnimationFrame 谁先执行？

Promise.then 属于微任务，会在当前宏任务结束后尽快清空；rAF 通常在下一次渲染前执行。

实际项目常见坑是什么？

接口返回后连续触发大量 Promise 回调，在里面同步计算列表、改 DOM、再追加微任务，页面就会点击无响应。

怎么拆重任务？

把非关键计算切片，用 setTimeout、MessageChannel 或 requestIdleCallback 给浏览器处理输入和渲染的机会。

写段代码

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