微任务在宏任务结束后、渲染前执行，优先级高于宏任务，用于尽快处理promise回调、MutationObserver等异步操作，确保逻辑在视觉更新前完成，提升性能与用户体验。
微任务，简单说，就是在当前宏任务执行结束后，下一个宏任务执行前，会被清空的任务队列。 这理解起来可能有点绕，但核心就是它比宏任务“更着急”执行。
微任务的执行时机非常关键，它直接影响到 JavaScript 事件循环的运作方式，进而影响到程序的性能和行为。
微任务是理解异步编程和优化 JavaScript 应用的关键。
微任务队列何时被清空？
微任务队列的清空时机，或者说执行时机，发生在以下几个关键节点：
-
每个宏任务执行完毕后： 这是最核心的一点。当一个宏任务（例如：script 脚本的首次执行、setTimeout、setInterval、I/O、ui 渲染等）执行完成后，JavaScript 引擎会检查微任务队列是否为空。
-
在渲染之前： 在浏览器准备更新页面渲染之前，会先清空微任务队列。这意味着微任务的更新会尽可能在用户看到变化之前完成。
-
事件循环的每个阶段之间： 事件循环的每个阶段（例如：定时器阶段、I/O 阶段、空闲阶段等）完成后，都会检查并执行微任务队列。
-
Promise 的
resolve
和
reject
回调： 当 Promise 对象的状态从 pending 变为 resolved 或 rejected 时，相应的
then
或
回调函数会被添加到微任务队列中。
-
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 应用。
