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

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

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

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

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

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

微任务队列何时被清空？

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

1. 每个宏任务执行完毕后： 这是最核心的一点。当一个宏任务（例如：script 脚本的首次执行、setTimeout、setInterval、I/O、UI 渲染等）执行完成后，JavaScript 引擎会检查微任务队列是否为空。

2. 在渲染之前： 在浏览器准备更新页面渲染之前，会先清空微任务队列。这意味着微任务的更新会尽可能在用户看到变化之前完成。

3. 事件循环的每个阶段之间： 事件循环的每个阶段（例如：定时器阶段、I/O 阶段、空闲阶段等）完成后，都会检查并执行微任务队列。

4. Promise 的 resolve 和 reject 回调： 当 Promise 对象的状态从 pending 变为 resolved 或 rejected 时，相应的 then 或 catch 回调函数会被添加到微任务队列中。

5. MutationObserver 的回调： 当 DOM 发生变化，并且 MutationObserver 观察到这些变化时，其回调函数会被添加到微任务队列中。

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

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

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

事件循环大致如下运作：

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

微任务的优先级高于宏任务，这是因为微任务的设计初衷就是为了处理那些需要尽快执行的任务，例如 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 的回调函数会被添加到微任务队列中，等待当前宏任务执行结束后再执行。

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

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

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

1. 避免在微任务中执行耗时操作： 微任务应该尽可能快地执行完成。 如果需要在微任务中执行耗时操作，可以考虑将这些操作放入宏任务中执行。

2. 避免创建过多的微任务： 尽量减少微任务的数量。 可以通过合并多个微任务来减少微任务的数量。

3. 使用 requestAnimationFrame： 如果需要在 DOM 更新后执行一些操作，可以考虑使用 requestAnimationFrame。 requestAnimationFrame 会在浏览器准备更新页面渲染之前执行回调函数，这可以避免页面卡顿。

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

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