js 宏任务和微任务|极客笔记

js 宏任务和微任务

在学习 JavaScript 的过程中，经常会听到宏任务和微任务这两个概念，它们与事件循环密切相关，对于理解 JavaScript 异步编程十分重要。本文将详细解释宏任务和微任务的概念、区别以及如何在代码中使用。

什么是宏任务和微任务

在 JavaScript 中，宏任务和微任务是指需要在事件循环中执行的任务。事件循环是 JavaScript 运行时的一部分，负责管理任务的调度和执行。在每个事件循环中，包含一个或多个宏任务队列和一个微任务队列。当事件循环启动时，会从宏任务队列中取出一个任务执行，然后执行完该任务后，会检查微任务队列是否有任务需要执行，如果有则依次执行微任务队列中的任务。这个过程会一直重复，直到所有的任务都执行完成。

宏任务和微任务的区别在于它们的执行时机和优先级。宏任务通常包括一些异步操作，如定时器回调、事件回调等，而微任务则是一些需要尽快执行的任务，比如 Promise 的回调、MutationObserver 的回调等。在每个事件循环中，微任务队列的任务优先级高于宏任务队列的任务，也就是说会先执行微任务队列中的任务，再执行宏任务队列中的任务。

示例代码

让我们通过一些示例代码来具体了解宏任务和微任务的执行顺序。

console.log('script start');

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

Promise.resolve().then(function() {
  console.log('promise');
});

console.log('script end');

运行以上代码会得到以下输出：

script start
script end
promise
setTimeout

从输出可以看出，先打印出了 “script start”，接着执行了 Promise 的微任务，然后才是定时器的宏任务。这说明微任务会先于宏任务执行。

宏任务和微任务的区别

了解了宏任务和微任务的概念和执行顺序后，下面我们来总结一下它们之间的区别：

执行时机不同：宏任务是一些需要等待一段时间后执行的任务，如定时器回调、事件回调等；微任务则是需要立即执行的任务，如 Promise 的回调。它们在事件循环中的优先级不同。
执行顺序不同：在每次事件循环中，微任务队列的任务会先于宏任务队列的任务执行。也就是说微任务的执行优先级高于宏任务。

如何使用宏任务和微任务

在实际项目中，我们经常需要使用宏任务和微任务来处理异步操作，比如在定时器回调、事件回调、Promise 的回调中使用。下面是一些常见的示例：

使用定时器创建宏任务

console.log('start');

setTimeout(function() {
  console.log('settimeout');
}, 0);

console.log('end');

以上代码会输出：

start
end
settimeout

使用 Promise 创建微任务

console.log('start');

Promise.resolve().then(function() {
  console.log('promise');
});

console.log('end');

以上代码输出：

start
end
promise

通过以上示例，可以看到如何在代码中使用宏任务和微任务来处理异步操作。

js 宏任务和微任务