MutationObserver 通过微任务调度、批量合并变化、弱引用设计和精准配置实现高性能DOM监听：延迟回调至宏任务后渲染前执行，合并多次变更一次性处理，目标节点负责持有观察者引用以支持自动回收，并建议缩小观察范围、关闭非必要选项。
MutationObserver 通过微任务机制和批量处理策略，在事件循环中实现高性能监听，避免了传统同步事件带来的阻塞和开销。
微任务调度，不打断当前执行
DOM 变化发生后，MutationObserver 不会立即执行回调，而是将回调注册为一个微任务（microtask）。这个微任务会在当前宏任务（如点击事件、脚本执行）结束后、浏览器渲染前，被事件循环统一清空执行。
- 保证主线程不被中断：同步事件（如已废弃的 DOMNodeInserted）会立刻触发，可能嵌套调用、反复重排重绘；而微任务延迟执行，让同步逻辑跑完再响应
- 优先级高于 setTimeout：微任务在宏任务之间插入执行，比 setTimeout 等宏任务更及时，又比渲染更靠前，适合需要“变更后、绘制前”干预的场景（比如调整样式或补全结构）
记录队列自动合并变化
短时间内多次 DOM 修改不会逐次触发回调，而是被收集进一个 MutationRecord 队列，等微任务执行时一次性传入回调函数。
- 减少函数调用次数：10 次 appendChild 调用，通常只触发一次回调，而不是 10 次
- 开发者可批量处理：回调参数是 mutationsList 数组，可遍历判断类型（childList / attributes / characterData），集中更新状态或视图，避免重复计算
弱引用设计降低内存压力
MutationObserver 实例对目标节点使用弱引用，目标节点却持有对观察者的强引用——这决定了回收时机的关键逻辑。
- 目标节点被移除且无其他引用时，它和关联的 MutationObserver 都能被垃圾回收，无需手动 disconnect 也能释放资源
- 但若你把 MutationRecord 保存下来（比如缓存用于调试），就会间接持有所含 DOM 节点的引用，阻碍回收。建议只提取必要字段（如 nodeName、type、oldValue），丢弃原始 record
配置收敛，从源头减少开销
性能不只靠机制保障，更取决于你怎么用。观察范围和选项越精确，浏览器要追踪的变化就越少。
- 避免 observe(document, { subtree: true })：全文档监听代价极高，应聚焦具体容器节点
- 关闭不用的类型：不需要属性变化就设 attributes: false；不需要文本变化就设 characterData: false
- subtree 设为 false 时，只监听目标节点直接子节点；设为 true 才递归监听所有后代，务必按需启用
