微任务队列：Promise与MutationObserver原理

微任务队列确保异步任务在当前同步代码结束后、下一事件循环前执行，优先级高于宏任务。主要包括Promise回调和MutationObserver回调。Promise的then/catch回调被加入微任务队列，待同步代码执行完毕后立即处理，且本轮循环中产生的新微任务也会被连续执行。例如Promise.resolve().then(() => console.log("微任务1"))后输出“同步代码”，实际先输出“同步代码”，再输出“微任务1”。MutationObserver监听DOM变化时，其回调作为微任务延迟执行，实现变更合并与高效响应，如appendChild后触发“DOM已变化”输出，顺序在同步操作之后。微任务在事件循环末尾统一清空，而宏任务需等待下一轮，因此微任务响应更及时。

微任务队列是 JavaScript 异步执行机制中的核心部分，它确保某些任务能在当前同步代码结束后、下一个事件循环开始前立即执行。这类任务优先级高于宏任务（如 setTimeout、setInterval），主要包括 Promise 回调和 MutationObserver 的回调。理解它们的工作原理有助于掌握 JS 事件循环的细节。

Promise 与微任务的关系

每次调用 Promise.then() 或 Promise.catch() 时，传入的回调函数会被放入微任务队列中，而不是立即执行。这个机制保证了 Promise 的链式调用具有正确的执行顺序。

例如：

let promise = Promise.resolve();
promise.then(() => console.log("微任务1"));
console.log("同步代码");

输出顺序为：同步代码 → 微任务1。这是因为 then 回调被推入微任务队列，在当前同步脚本执行完毕后触发。

关键点：

• Promise 的 resolve 或 reject 触发时，其对应的 then/catch 回调会被加入微任务队列
• 微任务在本次事件循环的末尾统一执行，且会清空整个微任务队列
• 在微任务执行期间注册的新微任务，也会在同一轮中被执行（链式传播）

MutationObserver 的微任务机制

MutationObserver 用于监听 DOM 变化，比如节点添加、属性修改等。它的回调不会在变化发生时立刻执行，而是将回调函数作为微任务推入队列。

这样设计是为了避免频繁触发回调带来的性能问题，同时保证变更响应的及时性。

示例：

let observer = new MutationObserver(() => {
  console.log("DOM 已变化");
});
observer.observe(document.body, { childList: true });
document.body.appendChild(document.createElement("div"));
console.log("同步操作完成");

输出顺序为：同步操作完成 → DOM 已变化。说明 MutationObserver 的回调是异步执行的，并且属于微任务级别。

注意：

• MutationObserver 不依赖事件循环中的渲染阶段，只要 DOM 修改发生，就会安排微任务
• 多个 DOM 变更会被合并，只触发一次微任务回调（批处理优化）
• 它比 setTimeout(0) 更快响应，但又不会阻塞主线程

微任务执行时机与调度逻辑

微任务在以下时机被处理：

• 当前同步执行栈为空时
• 本轮事件循环结束前

引擎会持续执行微任务队列中的任务，直到队列清空。这意味着一个微任务中产生的新微任务也会被立即处理。

对比宏任务：

• 宏任务（如 setTimeout）进入事件队列，需等待下一轮事件循环
• 微任务则在本轮结束前全部执行，因此响应更快

这种机制使得 Promise 链能够高效衔接，也使 MutationObserver 能在不影响性能的前提下及时响应 DOM 变化。

基本上就这些。