javascript微任务是什么_它与宏任务如何区分?

12次阅读

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

javascript微任务是什么_它与宏任务如何区分?

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

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

常见微任务包括:Promise.thenPromise.catchPromise.finallyMutationObserverqueueMicrotask()。Node.js 中还有 process.nextTick(优先级比 Promise 更高)。

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

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

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

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

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

立即学习Java免费学习笔记(深入)”;

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

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

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

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

例如:

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

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

text=ZqhQzanResources