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

MerkleJqueryRu2024-03-19 15:41

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

宏任务（Macrotask）：
- 宏任务是由浏览器提供的任务源，常见的宏任务包括：script（整体代码）、setTimeout、setInterval、I/O、UI rendering 等。
- 宏任务会进入到宏任务队列中，当执行栈为空时，事件循环会从宏任务队列中选择一个任务来执行。
- 每个宏任务之间会存在一个时间间隔，也就是说，宏任务之间会互相等待，直到前一个宏任务执行完毕。
微任务（Microtask）：
- 微任务是在当前任务执行完毕后立即执行的任务，它可以看作是在当前任务的末尾添加的任务，以确保在下一个事件循环之前执行。
- 常见的微任务包括：Promise 的 then 方法、MutationObserver 等。
- 微任务会在当前任务执行结束后立即执行，而不需要等待下一个宏任务。

关键区别总结：

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

举个例子：

javascript 复制代码

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 中用于管理异步代码的执行顺序，它们之间的区别主要体现在调度时机、执行顺序和来源等方面。