当前位置：首页 > 文章列表 > 文章 > 前端 > 微任务是什么？如何执行与时机解析

微任务是什么？如何执行与时机解析

2025-08-16 11:00:45 0浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《微任务是什么？微任务执行时机解析》，聊聊，我们一起来看看吧！

微任务在宏任务结束后、渲染前执行，优先级高于宏任务，用于尽快处理Promise回调、MutationObserver等异步操作，确保逻辑在视觉更新前完成，提升性能与用户体验。

什么是微任务？微任务的执行时机

微任务，简单说，就是在当前宏任务执行结束后，下一个宏任务执行前，会被清空的任务队列。这理解起来可能有点绕，但核心就是它比宏任务“更着急”执行。

微任务的执行时机非常关键，它直接影响到 JavaScript 事件循环的运作方式，进而影响到程序的性能和行为。

微任务是理解异步编程和优化 JavaScript 应用的关键。

微任务队列何时被清空？

微任务队列的清空时机，或者说执行时机，发生在以下几个关键节点：

每个宏任务执行完毕后： 这是最核心的一点。当一个宏任务（例如：script 脚本的首次执行、setTimeout、setInterval、I/O、UI 渲染等）执行完成后，JavaScript 引擎会检查微任务队列是否为空。
在渲染之前： 在浏览器准备更新页面渲染之前，会先清空微任务队列。这意味着微任务的更新会尽可能在用户看到变化之前完成。
事件循环的每个阶段之间： 事件循环的每个阶段（例如：定时器阶段、I/O 阶段、空闲阶段等）完成后，都会检查并执行微任务队列。
Promise 的 resolve 和 reject 回调： 当 Promise 对象的状态从 pending 变为 resolved 或 rejected 时，相应的 then 或 catch 回调函数会被添加到微任务队列中。
MutationObserver 的回调： 当 DOM 发生变化，并且 MutationObserver 观察到这些变化时，其回调函数会被添加到微任务队列中。

这几点理解起来，可能需要结合一些实际的例子。比如，你有一个点击事件，点击后，先修改了 DOM，然后执行了一个 Promise。那么，Promise 的 then 回调会在 DOM 更新渲染之前执行，确保你的逻辑在视觉变化之前完成。

为什么微任务比宏任务“更着急”？

这其实涉及到 JavaScript 事件循环的机制。 JavaScript 是单线程的，这意味着它一次只能执行一个任务。为了处理异步操作，JavaScript 使用了事件循环。

事件循环大致如下运作：

从宏任务队列中取出一个宏任务执行。
执行这个宏任务。
检查微任务队列，如果有微任务，则依次执行，直到微任务队列为空。
更新渲染。
重复以上步骤。

微任务的优先级高于宏任务，这是因为微任务的设计初衷就是为了处理那些需要尽快执行的任务，例如 Promise 的回调、DOM 变化后的处理等。如果这些任务被放入宏任务队列，那么它们可能需要等待更长的时间才能执行，这会导致性能问题和用户体验下降。

举个例子，假设你有一个动画，需要在 DOM 发生变化后立即更新。如果你使用宏任务来处理 DOM 变化后的更新，那么动画可能会出现卡顿，因为宏任务的执行可能会被其他任务延迟。但是，如果你使用微任务来处理 DOM 变化后的更新，那么动画会更加流畅，因为微任务会在 DOM 变化后立即执行。

Promise 是如何与微任务关联的？

Promise 的 then 和 catch 回调函数会被添加到微任务队列中。这意味着当 Promise 对象的状态发生变化时，相应的回调函数会尽快执行。

const promise = new Promise((resolve, reject) => {
  resolve('Promise resolved');
});

promise.then((value) => {
  console.log(value); // 这行代码会在当前宏任务结束后，下一个宏任务开始前执行
});

console.log('同步代码'); // 这行代码会先于 Promise 的 then 回调执行

在这个例子中，console.log('同步代码') 会先于 console.log(value) 执行。这是因为 console.log('同步代码') 是同步代码，而 promise.then 的回调函数会被添加到微任务队列中，等待当前宏任务执行结束后再执行。

MutationObserver 与微任务有什么关系？

MutationObserver 用于监听 DOM 的变化。当 DOM 发生变化时，MutationObserver 的回调函数会被添加到微任务队列中。

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log('DOM 发生变化了'); // 这行代码会在 DOM 变化后，当前宏任务结束后，下一个宏任务开始前执行
  });
});

observer.observe(document.body, {
  attributes: true,
  childList: true,
  subtree: true,
});

document.body.appendChild(document.createElement('div'));

console.log('同步代码'); // 这行代码会先于 MutationObserver 的回调执行

在这个例子中，console.log('同步代码') 会先于 console.log('DOM 发生变化了') 执行。这是因为 console.log('同步代码') 是同步代码，而 MutationObserver 的回调函数会被添加到微任务队列中，等待当前宏任务执行结束后再执行。

如何避免微任务带来的性能问题？

虽然微任务可以提高程序的性能，但是过多的微任务也会导致性能问题。如果微任务队列过长，那么执行微任务队列的时间就会变长，这会导致页面卡顿。

以下是一些避免微任务带来性能问题的建议：

避免在微任务中执行耗时操作： 微任务应该尽可能快地执行完成。如果需要在微任务中执行耗时操作，可以考虑将这些操作放入宏任务中执行。
避免创建过多的微任务： 尽量减少微任务的数量。可以通过合并多个微任务来减少微任务的数量。
使用 requestAnimationFrame： 如果需要在 DOM 更新后执行一些操作，可以考虑使用 requestAnimationFrame。 requestAnimationFrame 会在浏览器准备更新页面渲染之前执行回调函数，这可以避免页面卡顿。

理解微任务和宏任务的区别，以及它们在事件循环中的执行顺序，对于编写高性能的 JavaScript 代码至关重要。掌握这些知识，可以帮助你更好地理解异步编程，并编写出更加流畅、响应更快的 Web 应用。

终于介绍完啦！小伙伴们，这篇关于《微任务是什么？如何执行与时机解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

Promise 事件循环宏任务微任务执行时机