宏任务与微任务对比【前端异步】

简介

在JavaScript的异步编程中，理解事件循环（Event Loop）是至关重要的。事件循环机制确保了JavaScript的单线程能够处理高并发的异步任务。
微任务（Microtasks）和宏任务（Macrotasks）是事件循环中的两种主要任务类型。
本文将介绍这两种任务的区别，并通过代码示例深入探讨它们的工作机制，帮助您掌握前端异步编程的核心概念。

微任务与宏任务的基本概念

JavaScript的事件循环由任务队列组成，任务队列分为两种：微任务队列和宏任务队列。每个宏任务执行完毕后，JavaScript引擎会先执行所有微任务队列中的任务，然后再执行下一个宏任务。

宏任务（Macrotasks）

宏任务通常指的是那些会在事件循环的单独迭代中执行的任务，它们包括：

1. 整体脚本执行：整个JavaScript文件或脚本标签作为首次宏任务执行。
2. setTimeout 和 setInterval：设定的定时器到期后，会作为宏任务被添加到宏任务队列。
3. setImmediate (Node.js 特有)：在Node.js中，setImmediate用于在当前事件循环结束时执行。
4. I/O：包括从网络、文件系统等进行的输入/输出操作。
5. UI 渲染：浏览器将计算好的DOM更新渲染到屏幕上。
6. requestAnimationFrame：用于动画的帧同步，会在下一次重绘之前执行。

微任务（Microtasks）

微任务在当前宏任务完成后立即执行，它们包括：

1. Promise 回调：Promise 的 .then(), .catch(), 和 .finally() 方法。
2. MutationObserver：用于监听DOM树变化的API，当DOM变化时触发。
3. queueMicrotask：一个标准的API，允许开发者显式地将函数排入微任务队列。
4. process.nextTick (Node.js)：在Node.js中，process.nextTick 用于延迟函数的执行直到当前操作结束，但它会在当前执行栈清空之后，下一次事件循环之前执行。

宏任务示例

尽管setTimeout的延迟时间设置为0，它仍然是一个宏任务，会在当前宏任务执行完毕后，下一个事件循环迭代中执行。

console.log('Script start');

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

console.log('Script end');

输出：

Script start
Script end
setTimeout

微任务示例

Promise 的then回调是微任务，它们会在当前宏任务的所有代码执行完毕后立即执行。

console.log('Script start');

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

console.log('Script end');

输出：

Script start
Script end
promise1
promise2

微任务与宏任务的执行时序

在这个示例中，我们可以看到Promise的微任务在当前宏任务的代码执行完毕后立即执行，而两个setTimeout的宏任务则在下一个事件循环迭代中执行。

console.log('Script start');

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

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

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

console.log('Script end');

输出：

Script start
Script end
promise1
setTimeout2 (next event loop iteration)
setTimeout

结论

• 微任务和宏任务是JavaScript异步编程的基石。
• 微任务提供了一种更快的异步处理方式，通常用于快速连续的异步操作，而宏任务则包括了更广泛的异步事件。