微任务队列：Promise与MutationObserver原理-js教程-PHP中文网

微任务队列：Promise与MutationObserver原理

幻影之瞳

发布： 2025-11-21 21:39:06

原创

802人浏览过

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

微任务队列：promise与mutationobserver原理

微任务队列是 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 变化，比如节点添加、属性修改等。它的回调不会在变化发生时立刻执行，而是将回调函数作为微任务推入队列。

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

示例：

Symanto Text Insights

基于心理语言学分析的数据分析和用户洞察

查看详情

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

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

注意：