JavaScript微任务是什么？如何区分宏任务？

哈喽！今天心血来潮给大家带来了《JavaScript微任务是什么？如何与宏任务区分？》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

微任务是JavaScript中优先级最高的异步任务，总在当前宏任务结束后立即执行全部队列；常见微任务有Promise.then/catch/finally、MutationObserver、queueMicrotask()及Node.js的process.nextTick；易误认的宏任务包括setTimeout(0)、requestAnimationFrame和setImmediate；微任务递归会导致页面卡死，应改用setTimeout或requestAnimationFrame避免。

微任务是 JavaScript 异步调度中优先级最高的一类任务，它总在当前宏任务执行完后、下一个宏任务开始前立即执行，且会清空整个队列——不是“执行一个”，而是“执行全部”。

微任务有哪些？哪些容易被误当成宏任务？

常见微任务包括：Promise.then、Promise.catch、Promise.finally、MutationObserver 和 queueMicrotask()。Node.js 中还有 process.nextTick（优先级比 Promise 更高）。

容易混淆的“伪微任务”：

• setTimeout(() => {}, 0) 是宏任务，哪怕延时为 0，也得等下一轮事件循环
• requestAnimationFrame 是宏任务（浏览器专属），不是微任务
• setImmediate（仅 Node.js）是宏任务，和 setTimeout 同级但阶段不同

为什么 setTimeout(0) 总比 Promise.then 晚执行？

因为事件循环的规则是：执行完一个宏任务 → 立即执行所有排队中的微任务 → 才取下一个宏任务。

而 script 标签整体就是第一个宏任务；setTimeout 的回调被塞进宏任务队列末尾，Promise.then 的回调则进入微任务队列——它天然“插队”在当前宏任务之后、下一个宏任务之前。

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// 输出：1 → 4 → 3 → 2

微任务递归调用会卡死页面，怎么避免？

微任务没有“让出主线程”的机制，一旦在 queueMicrotask 或 Promise.then 里反复添加自身，就会形成“微任务风暴”，UI 渲染完全停滞，用户操作无响应。

正确做法是：需要轮询或高频调度时，改用 setTimeout 或 requestAnimationFrame，它们会主动让出控制权，允许浏览器渲染和响应事件。

例如：

• ❌ 错误写法（阻塞）：queueMicrotask(() => { /* do something */; queueMicrotask(arguments.callee); })
• ✅ 安全写法（可中断）：setTimeout(() => { /* do something */; setTimeout(arguments.callee, 0); }, 0)

真正难的不是记住哪些是微任务，而是意识到：微任务不是“更快的 setTimeout”，而是“必须立刻执行完的不可中断队列”。一旦设计不当，它比宏任务更容易引发隐性卡顿。

好了，本文到此结束，带大家了解了《JavaScript微任务是什么？如何区分宏任务？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！