javascript事件循环如何工作_宏任务和微任务有何区别-js教程-PHP中文网

javascript事件循环如何工作_宏任务和微任务有何区别

紅蓮之龍

发布： 2025-12-22 16:52:02

原创

812人浏览过

JavaScript事件循环严格遵循“宏任务→清空全部微任务→下一宏任务”节奏：先执行一个宏任务，再连续执行所有微任务直至队列为空，最后浏览器可能渲染并取下一个宏任务。

javascript事件循环如何工作_宏任务和微任务有何区别

JavaScript 事件循环的核心，是协调同步代码与异步回调的执行节奏。它不是“轮流执行所有任务”，而是严格遵循“一个宏任务 → 清空全部微任务 → 下一个宏任务”的固定节奏。

每次循环只做三件事，顺序不可颠倒：

执行当前宏任务（比如一段 script、一个 setTimeout 回调、一次点击事件处理函数）
立即检查并**连续执行完所有已存在的微任务**（Promise.then、queueMicrotask、MutationObserver 等），新产生的微任务也会被追加并执行，直到队列为空
浏览器可能进行 UI 渲染（如 DOM 更新可见），然后从宏任务队列中取出**下一个最老的宏任务**，开始下一轮

区别不在“谁更异步”，而在于**调度时机、来源归属和执行粒度**：

宏任务由宿主环境（浏览器或 Node.js）发起，代表相对独立、耗时可能较长的工作单元。例如：setTimeout/setInterval、I/O 回调、DOM 事件（click）、requestAnimationFrame、整体 script 标签代码
微任务由 JS 引擎自身调度，优先级更高，必须在当前宏任务结束后“立刻清空”。例如：Promise.then/catch/finally、queueMicrotask()、MutationObserver 回调
宏任务队列按 FIFO（先进先出）每次只取一个；微任务队列则“一来就全干完”，不给中间插入其他任务的机会

它直接决定代码输出结果和逻辑可靠性：

百度AI开放平台

百度提供的综合性AI技术服务平台，汇集了多种AI能力和解决方案

105

同步代码 → 微任务 → 宏任务，是默认执行流。比如 console.log('start')、Promise.resolve().then(() => console.log('p'))、setTimeout(() => console.log('t'), 0) 的输出一定是 start → p → t
微任务会阻塞 UI 渲染——如果在 Promise.then 里递归调用 queueMicrotask，页面会卡住，因为渲染要等微任务队列彻底清空
想让出主线程、允许页面更新？用 setTimeout(fn, 0)，而不是反复推微任务