JS中微任务和宏任务的区别

在 JavaScript 中,微任务(Microtask)和宏任务(Macrotask)是用来管理异步代码执行顺序的概念,它们之间有一些关键的区别:

  1. 宏任务(Macrotask)

    • 宏任务是由浏览器提供的任务源,常见的宏任务包括:script(整体代码)、setTimeout、setInterval、I/O、UI rendering 等。
    • 宏任务会进入到宏任务队列中,当执行栈为空时,事件循环会从宏任务队列中选择一个任务来执行。
    • 每个宏任务之间会存在一个时间间隔,也就是说,宏任务之间会互相等待,直到前一个宏任务执行完毕。
  2. 微任务(Microtask)

    • 微任务是在当前任务执行完毕后立即执行的任务,它可以看作是在当前任务的末尾添加的任务,以确保在下一个事件循环之前执行。
    • 常见的微任务包括:Promise 的 then 方法、MutationObserver 等。
    • 微任务会在当前任务执行结束后立即执行,而不需要等待下一个宏任务。

关键区别总结:

  • 调度时机不同:宏任务是在主线程上执行的任务,而微任务是在宏任务执行完毕之后立即执行的。
  • 执行顺序不同:微任务比宏任务优先级更高,当宏任务执行完毕后,会首先执行微任务队列中的任务,然后再执行下一个宏任务。
  • 来源不同:宏任务来自于浏览器提供的任务源,而微任务是由一些特定的API(比如 Promise)触发的。

举个例子:

console.log('Start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');

以上代码中,主线程首先执行同步代码,输出 ‘Start’ 和 ‘End’。然后,它遇到了一个宏任务 setTimeout 和一个微任务 Promise。根据事件循环的执行顺序,微任务优先级高于宏任务,所以微任务 Promise 首先执行,输出 ‘Promise’。接着,宏任务 setTimeout 执行,输出 ‘setTimeout’。

综上所述,微任务和宏任务在 JavaScript 中用于管理异步代码的执行顺序,它们之间的区别主要体现在调度时机、执行顺序和来源等方面。

原文链接:https://juejin.cn/post/7347905312478871615 作者:MerkleJqueryRu

(0)
上一篇 2024年3月19日 下午4:42
下一篇 2024年3月19日 下午4:52

相关推荐

发表回复

登录后才能评论