微任务何时执行？详解JavaScript执行机制

在JavaScript中，微任务是提升应用性能的关键机制，它们在当前同步代码执行后、浏览器渲染前立即执行，优先级高于宏任务。理解微任务的执行时机对于优化代码至关重要，Promise回调、`queueMicrotask()`和`MutationObserver`是常见的微任务来源，分别用于异步流程控制、批处理更新和DOM监听。微任务的高优先级确保状态即时更新，提供细粒度控制，并减少竞态条件。然而，滥用微任务可能导致“微任务饥饿”，影响页面响应速度。因此，开发者应避免无限循环，合理选择任务类型，避免在微任务中执行耗时操作，并利用开发者工具分析性能问题，以实现高效的JavaScript应用。

JavaScript中的微任务会在当前同步代码执行完毕后立即执行，且在浏览器渲染或处理宏任务之前。1. 微任务的执行时机是在调用栈清空后、宏任务之前，事件循环会优先清空微任务队列。2. 常见的微任务包括Promise回调、queueMicrotask()和MutationObserver回调，它们分别用于异步流程控制、批处理更新和监听DOM变化。3. 微任务高优先级确保状态即时更新、提供细粒度控制并减少竞态条件。4. 滥用微任务可能导致“微任务饥饿”，应避免无限循环、合理选择任务类型、不执行耗时操作并使用开发者工具分析性能问题。

JavaScript中的微任务，简而言之，它们会在当前同步代码执行完毕后立即执行，而且是在浏览器渲染或处理其他宏任务（比如setTimeout的回调）之前。你可以把它们想象成一种“插队”机制：当主线程上的任务（Call Stack）清空后，事件循环并不会立刻去处理下一个宏任务队列里的东西，而是会先检查并清空所有排队的微任务。

解决方案

理解JavaScript的事件循环是理解微任务执行时机的关键。我们都知道JavaScript是单线程的，这意味着它一次只能做一件事。但为了处理异步操作，浏览器或Node.js环境引入了事件循环（Event Loop）机制。

这个机制大致是这样的：

1. 执行同步代码： 所有的同步代码都在主线程的调用栈（Call Stack）中执行。
2. 检查微任务队列： 当调用栈清空，也就是当前正在执行的同步代码块跑完了，事件循环并不会马上从宏任务队列（Task Queue，也叫Callback Queue）中取出下一个任务。它会先去检查并清空微任务队列（Microtask Queue）。队列中的所有微任务会按顺序逐一执行，直到微任务队列为空。
3. 处理渲染和宏任务： 只有当微任务队列也清空后，事件循环才会考虑进行页面渲染（如果需要的话），然后从宏任务队列中取出一个宏任务来执行。这个宏任务执行完毕后，又会回到第二步，再次检查微任务队列。

这个流程意味着，如果你在一个宏任务内部触发了微任务，那么这些微任务会在该宏任务执行完毕后，但在下一个宏任务开始之前，全部被处理掉。这就像你在写一篇长文章，每写完一段（一个宏任务），你会先检查一下有没有需要立刻修改的小错误（微任务），都改完了，才会开始写下一段。

为什么微任务比宏任务优先级高？

这其实是JavaScript异步模型设计上的一种深思熟虑。对我个人而言，微任务的存在极大地提升了某些异步操作的原子性和确定性。

想想看，如果Promise的.then()回调是宏任务，那么在一个Promise链中，每个.then()的执行都可能被UI渲染、用户输入事件或者其他定时器打断。这会导致状态的不确定性，或者说，你很难精确预测某个Promise链的完整执行时机。

微任务的高优先级确保了：

• 状态的即时更新： 比如Promise，一旦它从pending变为fulfilled或rejected，它的所有.then()或.catch()回调（微任务）会尽快执行，确保相关的状态更新或副作用能够立即反映出来，而不会被其他耗时的宏任务延迟。这对于构建依赖于异步数据流的应用程序至关重要。
• 更细粒度的控制： 开发者可以利用微任务在当前脚本执行周期结束、UI更新前，插入一些高优先级的逻辑，比如DOM的批量修改或者某些内部状态的同步。这对于一些框架（如Vue、React在某些版本或场景下）进行批处理更新非常有用，它们希望在一次事件循环中完成所有相关的数据更新和DOM操作，以提高性能。
• 避免竞态条件： 在处理一些需要紧密协作的异步操作时，微任务能够减少因任务调度顺序不确定性而产生的竞态条件。

这种设计哲学，在我看来，是JavaScript在单线程模型下，为了兼顾响应性与复杂异步逻辑控制的一种优雅平衡。

常见的微任务有哪些，它们在实际开发中扮演什么角色？

在日常开发中，我们接触到的微任务主要有以下几种：

1. Promise的回调： 这是最常见的微任务来源。Promise.prototype.then(), Promise.prototype.catch(), Promise.prototype.finally()注册的回调函数都是微任务。

   • 角色： 构建异步流程的核心。无论是网络请求（fetch API返回Promise），还是处理复杂的异步序列，Promise都提供了强大的链式调用和错误处理机制。它们的微任务特性确保了Promise链的连续性，即一个Promise解决后，其后续的.then()会立刻被安排执行，而不是等到下一次事件循环。

   console.log('Script start');
   
   Promise.resolve().then(() => {
       console.log('Promise microtask 1');
   });
   
   Promise.resolve().then(() => {
       console.log('Promise microtask 2');
   });
   
   setTimeout(() => {
       console.log('setTimeout macrotask');
   }, 0);
   
   console.log('Script end');
   // 输出顺序：
   // Script start
   // Script end
   // Promise microtask 1
   // Promise microtask 2
   // setTimeout macrotask

2. queueMicrotask()： 这是一个专门用于调度微任务的API。它允许你显式地将一个函数放入微任务队列。

   • 角色： 当你需要确保某个任务在当前脚本执行完毕后、任何UI渲染或下一个宏任务开始前立即执行时，queueMicrotask()就派上用场了。它常用于库或框架内部，例如，当你需要对用户在一次事件循环中多次操作进行批处理，或者需要确保某些内部状态在用户可见的更新前完成同步时。它提供了一种比setTimeout(fn, 0)更精确且优先级更高的调度方式。

   console.log('Start');
   queueMicrotask(() => {
       console.log('queueMicrotask callback');
   });
   console.log('End');
   // 输出：
   // Start
   // End
   // queueMicrotask callback

3. MutationObserver的回调： MutationObserver用于监听DOM树的变化（如节点增删、属性修改、文本内容变化）。

   • 角色： 在需要对DOM变化做出反应时，MutationObserver非常高效。它的回调也是作为微任务执行的，这意味着它会在DOM变化发生后立即被调度，并在当前事件循环的微任务阶段执行。这使得它能够以非阻塞的方式响应DOM变化，而不会引起布局抖动或性能问题，因为它可以在浏览器渲染前收集所有变化并统一处理。

这些微任务在异步编程中各司其职，共同构成了JavaScript强大而灵活的并发模型。

如何避免微任务滥用导致的性能问题？

虽然微任务的高优先级带来了诸多便利，但如果不加节制地使用，也可能导致严重的性能问题，最典型的就是“微任务饥饿（Microtask Starvation）”。

想象一下，如果你的代码在一个微任务中又不断地生成新的微任务，那么事件循环就会一直忙于处理这些高优先级的任务，导致宏任务（比如UI渲染、用户交互事件、setTimeout回调）长时间得不到执行的机会。这会使得页面看起来卡顿、无响应，用户体验极差。

我遇到过一些新手开发者，或者在不理解事件循环机制的情况下，过度依赖Promise链，或者在循环中创建大量Promise，却没有意识到这可能导致微任务队列无限膨胀。

避免这种问题的策略包括：

• 警惕无限循环的微任务： 确保你的Promise链或queueMicrotask回调不会无限地生成新的微任务。如果你在一个微任务中又触发了另一个微任务，要确保这个链条最终会终止。
• 正确选择任务类型： 不是所有异步操作都适合作为微任务。如果一个任务可以稍微延迟执行，或者它涉及到长时间的计算、DOM操作（可能导致重排重绘），那么考虑使用宏任务（如setTimeout(fn, 0)或requestAnimationFrame）来调度它。宏任务会将任务推迟到下一个事件循环周期，给浏览器渲染和处理用户输入的机会。
• 避免在微任务中执行耗时操作： 微任务依然运行在主线程上。即使它们优先级高，如果单个微任务执行时间过长，仍然会阻塞主线程，导致页面卡顿。将耗时计算分解成小块，或者使用Web Workers来处理。
• 利用浏览器开发者工具进行性能分析： 现代浏览器的开发者工具（特别是Chrome的Performance面板）是诊断这类问题的利器。你可以录制一段页面操作，然后查看火焰图，分析主线程的活动。如果看到微任务（通常标记为Promise.then或Microtask）占据了大量时间，并且宏任务（如Animation Frame、Timer Fired）长时间没有执行，那么你可能就遇到了微任务饥饿问题。

理解微任务的执行时机和优先级，并学会合理地选择异步任务的调度方式，是编写高性能、响应式JavaScript应用的关键。这不仅仅是理论知识，更是实践中需要时刻警惕的细节。

以上就是《微任务何时执行？详解JavaScript执行机制》的详细内容，更多关于的资料请关注golang学习网公众号！