深入探秘：宏任务与微任务的恩怨情仇

2023-09-19 13:50:23

JavaScript 异步世界中的宏任务与微任务：一场执行顺序的恩怨情仇

想象一下 JavaScript 的异步世界，就像一个喧闹的游乐园，那里到处都是同时发生的事件。在这个游乐园里，有两种主要的玩家：宏任务和微任务，它们负责协调各种操作，确保一切都井然有序。但是，在这两巨头之间，有一场微妙的权力斗争，决定着它们在执行队列中的优先级。

宏任务：默默无闻的后台玩家

宏任务代表着 JavaScript 中相对耗时的任务，它们就像游乐园里的懒洋洋的摩天轮，悠闲地转动着。这些任务包括：

更新图形用户界面（GUI），比如渲染 DOM 元素
setTimeout() 和 setInterval() 定时器，用于延迟执行代码
I/O 操作，比如网络请求和文件读写

宏任务在主线程上排队等待执行，主线程负责执行代码和管理事件循环。一旦当前任务完成，主线程就会立即处理队列中的宏任务。

微任务：优先执行的插队者

与宏任务不同，微任务是轻量级的异步任务，就像游乐园里灵活敏捷的过山车。它们优先级高于宏任务，代表以下操作：

Promise.then() 和 async/await，用于异步处理任务
MutationObserver 回调，用于监听 DOM 变化
queueMicrotask()，用于将任务添加到微任务队列

当主线程处理宏任务时，如果队列中有待处理的微任务，它们会在当前宏任务结束时立即执行。这种优先级确保了对用户输入和交互的快速响应，让你的应用程序感觉更加灵敏。

执行顺序：一场微妙的舞蹈

宏任务和微任务之间的执行顺序是由以下规则决定的：

微任务会在当前宏任务结束时执行，即使是在嵌套宏任务中。
如果在处理宏任务时遇到了新的宏任务，它会被添加到宏任务队列的末尾，等待所有待处理微任务执行完成后再执行。
如果在处理微任务时遇到了宏任务，它会被添加到宏任务队列中，等待所有待处理微任务执行完成后再执行。

案例分析：代码执行顺序

考虑以下代码示例，它演示了宏任务和微任务的执行顺序：

console.log("宏任务开始");

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

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

console.log("宏任务结束");

输出：

宏任务开始
微任务
宏任务结束
宏任务

在这个例子中，微任务在宏任务结束时立即执行，即使宏任务嵌套在另一个宏任务中。

结论：异步中的默契配合

宏任务和微任务是 JavaScript 异步机制中的关键概念，它们共同确保应用程序平稳运行，对用户输入迅速响应。了解这两者的区别至关重要，可以帮助你编写健壮高效的 JavaScript 代码。记住，宏任务处理耗时的任务，而微任务优先处理用户交互和更新，它们之间的协调就像游乐园里精心编排的表演，让你的应用程序充满活力和吸引力。