在 JavaScript 中,微任务(Microtask)和宏任务(Macrotask)是用来管理异步代码执行顺序的概念,它们之间有一些关键的区别:
-
宏任务(Macrotask):
- 宏任务是由浏览器提供的任务源,常见的宏任务包括:script(整体代码)、setTimeout、setInterval、I/O、UI rendering 等。
- 宏任务会进入到宏任务队列中,当执行栈为空时,事件循环会从宏任务队列中选择一个任务来执行。
- 每个宏任务之间会存在一个时间间隔,也就是说,宏任务之间会互相等待,直到前一个宏任务执行完毕。
-
微任务(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