JavaScript中的宏任务和微任务

基本概念

JavaScript是单线程语言，但它通过事件循环(Event Loop)机制处理异步操作。在事件循环中，任务被分为宏任务(Macrotask)和微任务(Microtask)两类，它们有不同的执行优先级和时机。

宏任务(Macrotask)

宏任务是指JavaScript引擎中主线程上执行的任务，每个宏任务执行完毕后，引擎会检查是否有微任务需要执行。

常见的宏任务包括：

• script（整体代码）
• setTimeout
• setInterval
• setImmediate（Node.js环境）
• requestAnimationFrame（浏览器环境）
• I/O操作（如文件读写、网络请求）
• UI渲染（浏览器环境）

微任务(Microtask)

微任务是比宏任务优先级更高的任务，它们会在当前宏任务执行结束后、下一个宏任务开始前立即执行。

常见的微任务包括：

• Promise.then/catch/finally
• async/await（底层基于Promise）
• MutationObserver（浏览器环境）
• queueMicrotask()
• process.nextTick（Node.js环境，优先级高于其他微任务）

事件循环执行顺序

JavaScript事件循环的执行顺序如下：

1. 执行一个宏任务（通常是当前的script代码）
2. 执行过程中遇到微任务，将它们添加到微任务队列
3. 当前宏任务执行完毕后，立即执行所有微任务
4. 微任务执行过程中可能产生新的微任务，这些新的微任务也会在当前微任务阶段执行
5. 微任务队列清空后，开始下一个宏任务
6. 重复上述过程

下面使用Mermaid流程图展示事件循环的执行流程：

代码示例

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

console.log('1. 同步代码开始');

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

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

console.log('5. 同步代码结束');

执行结果：

1. 同步代码开始
5. 同步代码结束
2. Promise.then 微任务
3. 嵌套的Promise.then 微任务
4. setTimeout 宏任务

执行顺序解释：

1. 首先执行同步代码，输出"1. 同步代码开始"
2. 遇到setTimeout，将其回调函数加入宏任务队列
3. 遇到Promise.then，将其回调函数加入微任务队列
4. 继续执行同步代码，输出"5. 同步代码结束"
5. 同步代码（当前宏任务）执行完毕，开始执行微任务队列中的所有任务
6. 执行第一个Promise.then，输出"2. Promise.then 微任务"
7. 在微任务执行过程中，又产生了一个新的微任务（嵌套的Promise.then），将其加入微任务队列
8. 继续执行微任务队列中的任务，输出"3. 嵌套的Promise.then 微任务"
9. 微任务队列清空，开始执行下一个宏任务，即setTimeout的回调函数，输出"4. setTimeout 宏任务"

宏任务与微任务的区别

实际应用场景

1. 优化代码执行顺序

利用微任务优先级高于宏任务的特性，可以确保某些代码在当前同步代码执行后立即执行，而不必等待下一个宏任务。

function processData() {
  // 同步处理数据
  console.log('同步处理数据');
  
  // 使用微任务确保在下一宏任务前执行
  Promise.resolve().then(() => {
    console.log('微任务中处理数据');
  });
  
  // 使用宏任务
  setTimeout(() => {
    console.log('宏任务中处理数据');
  }, 0);
}

processData();
// 输出: 同步处理数据 -> 微任务中处理数据 -> 宏任务中处理数据

2. 避免阻塞UI渲染

在浏览器环境中，UI渲染是一个宏任务。如果我们在同步代码中执行大量计算，可能会阻塞UI渲染。通过将计算任务分解为多个微任务，可以让UI有机会在微任务之间进行渲染。

function heavyComputation() {
  let total = 0;
  
  // 同步执行大量计算，会阻塞UI
  for (let i = 0; i < 1000000000; i++) {
    total += i;
  }
  
  console.log('同步计算完成:', total);
}

function nonBlockingHeavyComputation() {
  let total = 0;
  let i = 0;
  
  function computeChunk() {
    const chunkSize = 1000000;
    const end = Math.min(i + chunkSize, 1000000000);
    
    for (; i < end; i++) {
      total += i;
    }
    
    if (i < 1000000000) {
      // 使用微任务分块计算，避免阻塞UI
      Promise.resolve().then(computeChunk);
    } else {
      console.log('非阻塞计算完成:', total);
    }
  }
  
  computeChunk();
}

// heavyComputation(); // 这会阻塞UI
nonBlockingHeavyComputation(); // 这不会阻塞UI

3. 确保DOM更新完成后再执行操作

在Vue、React等框架中，有时我们需要确保DOM更新完成后再执行某些操作。可以利用微任务机制实现这一点。

// Vue示例
this.message = '更新后的消息';
// DOM更新是异步的，在下一个微任务中完成
Promise.resolve().then(() => {
  // 此时DOM已经更新
  const element = document.getElementById('message');
  console.log('DOM已更新:', element.textContent);
});

注意事项

1. 微任务可能导致的无限循环：如果在微任务中不断产生新的微任务，可能会导致微任务队列无法清空，从而阻塞后续宏任务的执行。

let count = 0;
function generateMicrotask() {
  Promise.resolve().then(() => {
    console.log('微任务执行:', count++);
    if (count < 10) {
      generateMicrotask();
    }
  });
}

generateMicrotask();
// 这会连续执行10个微任务，期间不会有宏任务执行

2. Node.js中的process.nextTick：在Node.js环境中，process.nextTick是一种特殊的微任务，它的优先级高于其他微任务，会在当前操作完成后立即执行，甚至在其他微任务之前。

// Node.js环境
console.log('开始');

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

process.nextTick(() => {
  console.log('nextTick');
});

console.log('结束');
// 输出: 开始 -> 结束 -> nextTick -> Promise.then

3. 浏览器和Node.js的差异：虽然宏任务和微任务的基本概念在浏览器和Node.js中是一致的，但具体的实现和一些API有所不同。例如，浏览器有requestAnimationFrame，而Node.js有setImmediate和process.nextTick。

总结

JavaScript中的宏任务和微任务是事件循环机制的核心概念，理解它们对于编写高效的异步代码至关重要。关键点包括：

1. 宏任务：包括整体脚本、setTimeout、setInterval、I/O操作等，在事件循环中按顺序执行。
2. 微任务：包括Promise.then、async/await、MutationObserver等，优先级高于宏任务，会在当前宏任务执行后立即执行。
3. 执行顺序：同步代码 → 微任务 → 宏任务，微任务队列清空后才会执行下一个宏任务。
4. 应用场景：优化代码执行顺序、避免阻塞UI渲染、确保DOM更新完成后再执行操作等。

掌握宏任务和微任务的概念，可以帮助开发者更好地理解JavaScript的异步执行机制，编写出更高效、更可靠的代码。