0

0

微任务队列:Promise与MutationObserver原理

幻影之瞳

幻影之瞳

发布时间:2025-11-21 21:39:06

|

831人浏览过

|

来源于php中文网

原创

微任务队列确保异步任务在当前同步代码结束后、下一事件循环前执行,优先级高于宏任务。主要包括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 变化,比如节点添加、属性修改等。它的回调不会在变化发生时立刻执行,而是将回调函数作为微任务推入队列。

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

示例:

奇布塔
奇布塔

基于AI生成技术的一站式有声绘本创作平台

下载
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 变化。

基本上就这些。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

395

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

575

2023.08.10

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

502

2023.08.10

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

502

2023.08.10

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

513

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

244

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

298

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

5306

2023.08.17

php中文乱码如何解决
php中文乱码如何解决

本文整理了php中文乱码如何解决及解决方法,阅读节专题下面的文章了解更多详细内容。

1

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号