js中,详解 宏任务(MacroTask)和微任务(MicroTask)

42 阅读2分钟

在 JavaScript 中,任务(Task)被分为两种:宏任务(MacroTask)和微任务(MicroTask)。

js是一种同步的语言,js会从上到下解析代码,解析一次称之为一个事件循环。 如果微任务1和宏任务1在本次事件循环中调用,它们不会马上执行,会在本次事件循环结束后排队执行,宏任务1在前,微任务1跟着宏任务1执行

宏任务(MacroTask)

宏任务是每次事件循环中的一个大任务,每次事件循环只处理一个宏任务。常见的宏任务包括:

  • script(整个代码脚本)
  • setTimeout
  • setInterval
  • setImmediate(Node.js 环境)
  • I/O
  • UI rendering

当 JavaScript 执行栈为空时,事件循环会查看宏任务队列,并将一个宏任务添加到 JavaScript 执行栈中执行。

微任务(MicroTask)

微任务是一个比宏任务更小的任务,它可以在一个宏任务执行完后立即执行。微任务允许我们在一个事件循环的末尾处理一些需要优先执行的任务。常见的微任务包括:

  • Promise.then() 和 Promise.catch()
  • process.nextTick(Node.js 环境)
  • MutationObserver(浏览器环境)

微任务队列会在每次事件循环的末尾执行,也就是说,在一个宏任务执行后,会先执行完所有的微任务,然后再去查看宏任务队列,开始下一个宏任务。

这种设计使得 JavaScript 能够以更高效的方式处理异步任务。例如,如果你有一系列的 Promise 链式调用,使用微任务可以确保这些 Promise 按顺序执行,而不会被其他的宏任务打断。

总的来说,宏任务和微任务的概念是 JavaScript 事件循环处理异步任务的基础,理解它们对于掌握 JavaScript 的异步编程模型非常重要。