【JS】宏任务与微任务

在 JavaScript 中，任务分为：

• 宏任务 macro task
• 微任务 micro task

他们的执行顺序有一定的区别，理解他们的执行机制对于处理异步操作非常重要。

宏任务

宏任务是由 JavaScript 引擎提供的任务源，通常包括一下几种情况：

• 主代码块
• setTimeout 和 SetInterval 回调函数
• I/O 操作（例如文件读写、网络请求等）
• UI 渲染

每个宏任务会在事件循环的不同阶段执行，宏任务之间会有一个执行顺序，即先进先出。

微任务

微任务是由 Promise、MutationObserve 和 process.nextTick 等提供的任务源。

常见的微任务包括：

• Promise 的回调函数
  • .then()、.catch()、finally()
• MutationObserver 的回调函数
  • 是一个 js api，用于监测 DOM 的变化
• process.nextTick
  • process.nextTick 是 Node.js 中的一个特殊函数，用于在当前执行栈完成后立即执行回调函数。它提供了一种将回调函数插入到事件循环的微任务队列的方法，并且优先级比 Promise 的微任务更高。

微任务会在当前宏任务执行完毕后立即执行，而不需要等待下一个宏任务。在同一个宏任务中，所有的微任务会按照它们被创建的顺序依次执行完毕。

事件循环的基本流程如下：

1. 执行当前宏任务的同步代码。
2. 检查是否存在微任务队列，如果存在则依次执行所有微任务。
3. 执行浏览器的渲染操作（如果有）。
4. 执行下一个宏任务。

示例代码

console.log('1');

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

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

console.log('4');

在上述代码中，按照执行顺序，输出结果为：
1
4
3
2

解释如下：

1. 首先，同步代码 console.log('1') 和 console.log('4') 都会立即执行，分别打印数字 1和4。
2. 然后，遇到 setTimeout，它是一个宏任务，会被放到宏任务队列中，等待执行。
3. 接着，遇到 Promise.resolve().then()，它是一个微任务，会被放到微任务队列中，等待执行。
4. 所有同步代码执行完毕后，执行微任务队列中的微任务，打印数字 3。
5. 最后，执行宏任务队列中的宏任务，即 setTimeout 的回调函数，打印数字 2。

总结：微任务优先级高于宏任务，微任务会在当前宏任务执行完毕后立即执行。