js的宏任务与微任务

在 JavaScript 中，任务分为宏任务（Macrotask）和微任务（Microtask）。理解这两者的区别对于理解事件循环机制至关重要，尤其是在处理异步代码时。

宏任务 (Macrotask)

宏任务是最常见的任务类型，它们包括：

• script：整个 <script> 标签内的代码执行是一个宏任务。
• setTimeout：定时器任务，当设定的时间到达后，将回调函数加入到宏任务队列中等待执行。
• setInterval：定时器任务，与 setTimeout 类似，但会周期性地执行回调函数。
• setImmediate：仅在 Node.js 中可用，当当前事件循环结束时立即执行。
• I/O：Node.js 中的输入/输出操作。
• UI rendering：浏览器的渲染任务。

宏任务的特点是，每一个宏任务都有机会去运行一个完整的事件循环。当一个宏任务执行完毕后，如果有新的宏任务加入队列，事件循环将会处理这些新加入的任务。

微任务 (Microtask)

微任务是在当前宏任务执行结束后立即执行的任务，但在下一次宏任务开始前执行。这意味着它们在同一个事件循环的阶段内会被优先执行。

微任务包括但不限于：

• process.nextTick：Node.js 特有的，会在当前宏任务结束后立即执行。
• Promise：当 Promise 的状态发生变化时（例如，从 pending 到 resolved 或 rejected），微任务队列中的回调函数会被调度执行。
• MutationObserver：观察 DOM 变化并在变化发生时执行回调。
• QueueMicrotask：允许你直接将一个函数添加到当前微任务队列中。

示例

以下是一个简单的示例，说明宏任务和微任务的执行顺序：

console.log('script start');

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

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

queueMicrotask(() => {
    console.log('queueMicrotask');
});

setImmediate(() => console.log('setImmediate')); // Node.js 特有

console.log('script end');

在这个例子中，输出的顺序将是：

script start
Promise
script end
queueMicrotask
Promise resolve
setImmediate
setTimeout

这是因为 script 是一个宏任务，它包含了一个 Promise 和 queueMicrotask 的微任务。在 script 执行完成后，事件循环会立即执行微任务队列中的任务。然后，尽管 setTimeout 和 setImmediate 设置的时间为 0，它们仍然会等到下一个宏任务周期才被执行。

理解宏任务和微任务的区别有助于更好地控制程序的执行流程，特别是在涉及复杂的异步操作时。