在 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,它们仍然会等到下一个宏任务周期才被执行。
理解宏任务和微任务的区别有助于更好地控制程序的执行流程,特别是在涉及复杂的异步操作时。