javaScript通过事件循环实现异步,先执行同步代码,再处理回调;宏任务(如setTimeout)每轮取一个,微任务(如promise.then)在宏任务后立即清空。输出顺序为1→4→3→2,因微任务优先级高;但滥用微任务可能阻塞ui更新或引发“微任务风暴”,需合理选择执行时机。

javascript 是单线程语言,通过事件循环(Event Loop)实现异步操作的处理。理解事件循环和微任务队列是掌握 JavaScript 异步执行机制的关键。
事件循环的基本原理
JavaScript 引擎在执行代码时,会先运行同步任务,这些任务在主线程上按顺序执行。当遇到异步操作(如 setTimeout、Promise、dom 事件等),它们会被挂起并交给浏览器的其他模块处理。一旦这些异步任务完成,对应的回调函数就会被放入任务队列中,等待事件循环调度执行。
事件循环持续检查调用栈是否为空。如果为空,就从任务队列中取出一个任务推入调用栈执行。这个过程不断重复,形成“循环”。
宏任务与微任务的区别
在事件循环中,任务分为两类:宏任务(macrotask)和微任务(microtask)。
立即学习“Java免费学习笔记(深入)”;
- 宏任务 包括:整体 script 代码、setTimeout、setInterval、I/O、UI 渲染等。
- 微任务 包括:Promise.then/catch/finally 回调、MutationObserver、queueMicrotask 等。
每次事件循环迭代中,只会从宏任务队列中取一个任务执行。但在该宏任务执行结束后,会清空当前所有的微任务队列——也就是说,所有已存在的微任务会连续执行,直到微任务队列为空,才会进行下一轮宏任务。
微任务队列的执行时机
微任务的关键特性是在**每个宏任务执行完后立即执行**。这意味着微任务具有更高的优先级。
例如:
console.log('1'); setTimeout(() => { console.log('2'); }, 0); Promise.resolve().then(() => { console.log('3'); }); console.log('4');
输出顺序是:1 → 4 → 3 → 2。
解释:
- ‘1’ 和 ‘4’ 是同步代码,最先输出。
- Promise 的 then 回调是微任务,在当前宏任务结束后立即执行。
- setTimeout 是宏任务,要等到下一个事件循环周期才执行。
实际应用中的注意事项
由于微任务执行时机早于下一个宏任务,滥用微任务可能导致问题:
- 长时间清空微任务队列会阻塞 UI 更新,因为渲染属于宏任务。
- 递归使用 queueMicrotask 或 Promise 可能导致“微任务风暴”,使页面无响应。
- 在某些场景下,想让代码“稍后执行但不阻塞渲染”,应使用 setTimeout 而非微任务。
基本上就这些。搞清楚宏任务和微任务的执行顺序,就能更好预测异步代码的行为。


