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（先进先出）每次只取一个；微任务队列则“一来就全干完”，不给中间插入其他任务的机会

为什么这个顺序很重要

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

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

常见误区提醒

别被“0 毫秒”误导：

• setTimeout(fn, 0) 不是“马上执行”，只是尽快放入宏任务队列，要等当前宏任务 + 所有微任务都结束才轮到它
• Promise.resolve().then() 也不是“稍后执行”，而是“同步代码一结束、立刻执行”，哪怕只有几微秒延迟
• script 整体本身就是一个宏任务——它是整个事件循环的第一个宏任务