【JavaScript】任务队列---宏任务与微任务详解

JavaScript 是一种单线程语言，它通过任务队列来处理并发任务。JavaScript 中的任务分为宏任务（Macro Task）和微任务（Micro Task），这两者在事件循环（Event Loop）中的调度顺序是关键。本文将详细介绍宏任务和微任务的概念、执行机制以及它们的应用场景，帮助开发者更好地理解 JavaScript 的任务调度系统。

一、JavaScript 中的任务调度机制

1. 单线程与异步任务

JavaScript 是单线程运行的，这意味着同一时间只能执行一个任务。然而，现代 Web 应用通常涉及大量异步操作，如网络请求、定时器等，为了避免阻塞主线程，JavaScript 使用事件循环机制来处理这些异步任务。

2. 任务队列的基本概念

任务队列是事件循环的重要组成部分。当一个异步操作完成时，它会将回调函数推入任务队列，等待主线程空闲时执行。任务队列中的任务分为两类：

• 宏任务（Macro Task）：常见的宏任务包括 setTimeout、setInterval、I/O 操作等。
• 微任务（Micro Task）：常见的微任务包括 Promise.then()、MutationObserver、process.nextTick() 等。

任务调度的核心在于理解宏任务和微任务的执行顺序。

二、宏任务与微任务的区别

1. 宏任务

宏任务是事件循环中的“主要任务”，每次事件循环会从宏任务队列中取出一个任务并执行。在执行每个宏任务时，JavaScript 引擎会检查是否有任何已完成的微任务，如果有，就会先执行微任务，然后再继续下一个宏任务。

宏任务的典型例子包括：

• setTimeout 和 setInterval
• UI 渲染
• 事件处理函数（如点击事件）
• AJAX 请求回调

2. 微任务

微任务是更高优先级的任务，它们通常在当前宏任务结束后立即执行。微任务队列的执行优先级高于宏任务，这意味着当一个宏任务执行完毕后，所有的微任务队列都会被清空，才会执行下一个宏任务。

微任务的典型例子包括：

• Promise.then() 或 catch()
• MutationObserver
• process.nextTick()（在 Node.js 中）

三、事件循环中的宏任务和微任务执行顺序

为了更清晰地理解宏任务和微任务的执行顺序，我们来看一下事件循环的基本步骤：

1. 执行一个宏任务（从宏任务队列中取出）。
2. 检查微任务队列并执行所有的微任务，直到队列清空。
3. 渲染更新 UI（如果有）。
4. 重复步骤 1。

简化步骤如下：

• 宏任务 → 微任务 → 渲染 → 下一个宏任务。

例子：宏任务与微任务的执行顺序

console.log('宏任务1');  // 宏任务1

setTimeout(() => {
  console.log('宏任务2');  // 宏任务2
}, 0);

Promise.resolve().then(() => {
  console.log('微任务1');  // 微任务1
});

console.log('宏任务3');  // 宏任务3

执行顺序：

1. 先执行同步代码（宏任务1 和 宏任务3）。
2. 然后执行微任务（微任务1）。
3. 最后执行宏任务队列中的 setTimeout 回调（宏任务2）。

输出结果：

宏任务1
宏任务3
微任务1
宏任务2

四、应用场景分析

1. setTimeout 与 Promise 的组合

在实际开发中，我们经常会遇到宏任务和微任务的组合使用场景，例如在处理异步操作时：

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

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

console.log('同步代码');

执行顺序：

1. 先执行同步代码。
2. 然后执行微任务（Promise）。
3. 最后执行宏任务（setTimeout）。

输出结果：

同步代码
Promise 微任务
setTimeout 宏任务

2. 多个微任务的执行顺序

微任务之间的执行顺序也是按加入队列的顺序执行，例如：

Promise.resolve().then(() => {
  console.log('微任务1');
});

Promise.resolve().then(() => {
  console.log('微任务2');
});

console.log('同步代码');

执行顺序：

1. 先执行同步代码。
2. 然后按顺序执行微任务（微任务1 和 微任务2）。

输出结果：

同步代码
微任务1
微任务2

3. 宏任务嵌套微任务

当一个宏任务中包含微任务时，微任务会在该宏任务结束后立即执行：

setTimeout(() => {
  console.log('宏任务1');
  Promise.resolve().then(() => {
    console.log('微任务1');
  });
}, 0);

setTimeout(() => {
  console.log('宏任务2');
}, 0);

执行顺序：

1. 执行第一个宏任务（宏任务1）。
2. 在宏任务1 中，Promise 创建的微任务被加入微任务队列，立即执行（微任务1）。
3. 执行第二个宏任务（宏任务2）。

输出结果：

宏任务1
微任务1
宏任务2

五、实际应用中的任务调度策略

1. 提升性能

理解宏任务和微任务的调度顺序有助于提升应用性能。例如，在处理大量异步操作时，可以优先使用微任务来减少 UI 更新的频率，从而提升渲染性能。

2. 避免回调地狱

在以往的 JavaScript 编程中，开发者常常会陷入“回调地狱”，这不仅影响代码可读性，也会影响任务的调度。通过 Promise 和 async/await 的结合，可以将异步操作放入微任务队列，从而避免层层嵌套的回调。

3. 优化 UI 渲染

在进行复杂的 UI 操作时，可以利用微任务的高优先级特性，将与数据处理相关的任务放入微任务队列中，确保它们在每个宏任务结束时迅速执行完毕，提升用户体验。

六、总结

宏任务和微任务是 JavaScript 异步执行机制的核心组成部分。它们之间的调度顺序直接影响着代码的执行结果和性能优化。通过合理地使用这两种任务类型，开发者可以创建出高效、流畅的用户界面，并确保异步操作按预期执行。希望通过本文，你能更深入地理解宏任务和微任务在 JavaScript 中的运作机制，并在实际项目中充分利用这些知识来提升代码性能和可维护性。

推荐：

• JavaScript
• react
• vue

---