JavaScript 中宏任务 (Macro Task) 和微任务 (Micro Task) 的区别是什么?

推荐答案

在 JavaScript 中,宏任务(Macro Task)和微任务(Micro Task)是两种不同类型的任务队列,它们在事件循环中的执行顺序不同。

  • 宏任务:包括 setTimeoutsetIntervalsetImmediate(Node.js 环境)、I/O 操作、UI 渲染等。宏任务会在事件循环的每一轮中执行一个任务。

  • 微任务:包括 Promisethencatch 回调、process.nextTick(Node.js 环境)、MutationObserver 等。微任务会在当前宏任务执行完毕后立即执行,且会在下一个宏任务之前执行。

本题详细解读

宏任务(Macro Task)

宏任务是指那些需要较长时间才能完成的任务,通常包括以下几种:

  • 定时器任务:如 setTimeoutsetInterval,它们会在指定的时间后执行回调函数。
  • I/O 操作:如文件读写、网络请求等异步操作。
  • UI 渲染:浏览器在每一帧渲染之前会执行宏任务。
  • setImmediate:Node.js 中特有的宏任务,类似于 setTimeout(fn, 0)

宏任务会在事件循环的每一轮中执行一个任务。也就是说,当事件循环开始执行时,它会从宏任务队列中取出一个任务执行,执行完毕后,再检查微任务队列。

微任务(Micro Task)

微任务是指那些需要尽快执行的任务,通常包括以下几种:

  • Promise 回调:如 Promisethencatch 回调。
  • process.nextTick:Node.js 中特有的微任务,优先级高于 Promise
  • MutationObserver:用于监听 DOM 变化的回调。

微任务会在当前宏任务执行完毕后立即执行,且会在下一个宏任务之前执行。也就是说,当事件循环执行完一个宏任务后,它会立即执行所有微任务,直到微任务队列为空,然后再执行下一个宏任务。

执行顺序示例

-- -------------------- ---- -------
------------------- --------

--------------------- -
  --------------------------
-- ---

--------------------------------- -
  ------------------------
------------------ -
  ------------------------
---

------------------- ------

输出顺序为:

解释:

  1. script startscript end 是同步代码,立即执行。
  2. setTimeout 是宏任务,会被放入宏任务队列。
  3. Promisethen 回调是微任务,会被放入微任务队列。
  4. 同步代码执行完毕后,事件循环会先执行所有微任务(promise1promise2),然后再执行宏任务(setTimeout)。

总结

  • 宏任务和微任务的区别在于它们的执行时机和优先级。
  • 微任务会在当前宏任务执行完毕后立即执行,且会在下一个宏任务之前执行。
  • 理解宏任务和微任务的执行顺序对于编写高效的异步代码非常重要。
纠错
反馈