彻底理解浏览器中的 Event Loop（事件循环）机制！

为什么 setTimeout(fn, 0) 不会立即执行？ Promise.then 和 setTimeout 谁先执行？ 微任务、宏任务怎么区分？

这些问题都源于一个核心机制：Event Loop（事件循环）

🧠一句话总结：

JavaScript 是单线程语言，Event Loop 是它用来管理异步任务调度的机制。

🔧宏任务 vs 微任务：

类型示例何时执行宏任务setTimeout, setInterval, requestAnimationFrame每轮事件循环开始时执行微任务Promise.then, MutationObserver, queueMicrotask当前任务执行结束立即执行

📊执行顺序示例：

js

复制编辑

console.log('start')

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

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

console.log('end')

✅输出顺序：

arduino

复制编辑

start

end

promise

timeout

原因：

1. start 和 end 是同步代码
2. promise.then() 属于微任务，紧跟当前宏任务执行完立即执行
3. setTimeout 是下一个宏任务，要等到微任务清空后再执行

🔁Event Loop 调度流程：

1. 执行全局同步代码（同步阶段）
2. 执行微任务队列（Promise.then 等）
3. 执行下一个宏任务（如 setTimeout 回调）
4. 重复步骤 2 → 3（循环进行）

🧠Tips：

• 微任务总是在当前宏任务之后、下一个宏任务之前执行
• 如果微任务队列不断填充，会阻塞宏任务执行（如无限 Promise.then）
• 不要在微任务中写死循环，否则页面会卡死！

https://blog.csdn.net/qqqdqd/article/details/149209167

jrhz.info

https://blog.csdn.net/qqqdqd/article/details/149209090

https://blog.csdn.net/qqqdqd/article/details/149208922

https://blog.csdn.net/qqqdqd/article/details/149209254

https://blog.csdn.net/qqqdqd/article/details/149209491

https://blog.csdn.net/qqqdqd/article/details/149209582

https://blog.csdn.net/qqqdqd/article/details/149209652