宏任务与微任务的区别：一场轻松的技术讲座
你好，欢迎来到今天的讲座！
大家好！今天我们要聊的是 JavaScript 中非常重要的两个概念：宏任务（Macro tasks） 和 微任务（Micro tasks）。这两个概念虽然听起来有点高大上，但其实它们就在我们日常的代码中扮演着至关重要的角色。通过理解它们的工作原理，你可以更好地掌控异步代码的执行顺序，写出更高效的程序。
为了让这次讲座更加生动有趣，我会尽量用通俗易懂的语言来解释这些概念，并且会穿插一些代码示例，帮助你更好地理解。准备好了吗？让我们开始吧！
1. 什么是宏任务和微任务？
首先，我们需要明白，JavaScript 是单线程的。这意味着它在同一时间只能执行一个任务。但是，JavaScript 又是一个异步语言，它可以处理多个任务，而不会阻塞主线程。为了实现这一点，JavaScript 引入了事件循环（Event Loop）机制。
在这个机制中，任务被分为两类：
- 宏任务（Macro tasks）：这些任务通常会在当前任务完成后立即执行，或者在下一次事件循环时执行。
- 微任务（Micro tasks）：这些任务会在当前宏任务完成后立即执行，但在下一个宏任务之前。
简单来说：
- 宏任务是“大任务”，比如
setTimeout、setInterval、I/O操作等。 - 微任务是“小任务”，比如
Promise、process.nextTick（Node.js 环境）、MutationObserver等。
2. 宏任务 vs 微任务：谁先执行？
这是很多人容易混淆的地方。实际上，JavaScript 的事件循环是按照以下顺序工作的：
- 执行当前的 宏任务。
- 执行所有 微任务 队列中的任务，直到队列为空。
- 渲染页面（如果有必要）。
- 选择下一个宏任务，重复上述过程。
举个例子：
console.log('Start');
setTimeout(() => {
console.log('Macro task 1');
}, 0);
Promise.resolve().then(() => {
console.log('Micro task 1');
});
console.log('End');输出结果：
Start
End
Micro task 1
Macro task 1解释：
console.log('Start')和console.log('End')是同步代码，直接执行。setTimeout是一个宏任务，它会被放入宏任务队列，等待当前任务完成后执行。Promise.resolve().then()是一个微任务，它会在当前宏任务结束后立即执行，因此它比setTimeout先输出。
3. 宏任务和微任务的常见来源
为了让大家更清楚地理解宏任务和微任务的区别，我整理了一个表格，列出了常见的宏任务和微任务来源。
| 宏任务（Macro tasks） | 微任务（Micro tasks） |
|---|---|
setTimeout |
Promise |
setInterval |
process.nextTick (Node.js) |
setImmediate (Node.js) |
MutationObserver |
| I/O 操作 | queueMicrotask |
| UI 事件（如点击、滚动） | |
MessageChannel |
注意：
- 在 Node.js 环境中，
process.nextTick是一种特殊的微任务，它的优先级非常高，甚至比Promise还要高。 queueMicrotask是 ES2021 新增的一个 API，它允许你手动将任务推入微任务队列。
4. 实战演练：宏任务和微任务的嵌套
接下来，我们来看一个稍微复杂一点的例子，涉及到宏任务和微任务的嵌套。
console.log('Start');
setTimeout(() => {
console.log('Macro task 1');
Promise.resolve().then(() => {
console.log('Micro task 1');
});
setTimeout(() => {
console.log('Macro task 2');
}, 0);
}, 0);
Promise.resolve().then(() => {
console.log('Micro task 2');
});
console.log('End');输出结果：
Start
End
Micro task 2
Macro task 1
Micro task 1
Macro task 2解释：
- 同步代码
console.log('Start')和console.log('End')先执行。 Promise.resolve().then()是微任务，它会在当前宏任务结束后立即执行，因此Micro task 2会先于Macro task 1输出。setTimeout是宏任务，它会在当前宏任务结束后进入宏任务队列，等待下一次事件循环。- 在
Macro task 1执行完毕后，Micro task 1作为微任务立即执行。 - 最后，
Macro task 2作为宏任务，在下一次事件循环中执行。
5. 性能优化的小技巧
了解了宏任务和微任务的区别后，我们可以利用这些知识来进行一些性能优化。例如：
- 避免过多的微任务：虽然微任务的优先级较高，但如果大量使用微任务，可能会导致页面渲染被推迟，影响用户体验。因此，应该谨慎使用
Promise和queueMicrotask。 - 合理使用宏任务：对于不需要立即执行的任务，可以考虑使用
setTimeout或setInterval，让它们在下一次事件循环中执行，从而减少对主线程的占用。
一个小技巧：
如果你需要确保某个任务在当前宏任务结束后立即执行，但又不想让它成为微任务，可以使用 setTimeout(fn, 0)。这样可以将任务推入宏任务队列，但它会在下一次事件循环中执行，而不是立即执行。
6. 总结
今天我们学习了宏任务和微任务的区别，以及它们在 JavaScript 事件循环中的执行顺序。通过理解这些概念，我们可以更好地控制异步代码的执行顺序，避免常见的坑，并进行一些性能优化。
关键点回顾：
- 宏任务 是较大的任务，通常会在下一次事件循环中执行。
- 微任务 是较小的任务，会在当前宏任务结束后立即执行。
- 事件循环 是 JavaScript 处理任务的核心机制，它决定了任务的执行顺序。
- 合理使用宏任务和微任务 可以提高代码的性能和响应速度。
希望今天的讲座对你有所帮助！如果有任何问题，欢迎随时提问。😊
7. 参考资料
- MDN Web Docs – Event Loop
- [You Don’t Know JS: Async & Performance](You Don’t Know JS)
- JavaScript.info – Event Loop
再次感谢大家的参与，期待下次再见！
