宏任务与微任务——轻松理解！

2023-11-07 09:51:34

在谈论宏任务与微任务之前，我们先回顾一下JavaScript的异步执行机制。JavaScript是一种单线程语言，这意味着它一次只能执行一个任务。但是，在现代Web开发中，我们经常需要处理多个并发任务，比如同时处理用户输入、网络请求、定时器等。为了解决这个问题，JavaScript引入了异步执行机制，即允许在主线程之外执行任务，从而实现并行处理。

宏任务和微任务是JavaScript异步执行机制中的两个关键概念。宏任务是需要在主线程中执行的任务，而微任务是在主线程空闲时执行的任务。主线程执行宏任务时，会先将当前执行的宏任务完成，然后再执行其他宏任务。微任务则不同，微任务会在当前宏任务执行完后立即执行，但它会先于下一个宏任务执行。

在浏览器中，宏任务主要包括script标签中的代码、setTimeout和setInterval等定时器、XMLHttpRequest对象发起的网络请求等。微任务主要包括Promise.then()、MutationObserver和HTML DOM事件等。

在Node.js中，宏任务主要包括fs.readFile()、setImmediate()和setTimeout()等定时器、process.nextTick()方法等。微任务主要包括Promise.then()和process.nextTick()等。

理解宏任务和微任务对于理解JavaScript的异步执行机制非常重要。在实际开发中，我们可以利用宏任务和微任务来实现各种异步编程场景，比如实现动画效果、处理用户交互、进行网络请求等。

接下来，我们通过一些示例来进一步理解宏任务和微任务。

示例1：

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

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

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

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

// 输出结果：
// 宏任务1
// 宏任务3
// 微任务1
// 宏任务2

在这个示例中，宏任务1、宏任务3和宏任务2按顺序执行。微任务1则在所有宏任务执行完后立即执行。

示例2：

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

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

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

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

// 输出结果：
// 宏任务1
// 宏任务3
// 宏任务2
// 微任务1