MutationObserver优化三大原则：精准监听（锁定具体节点、精简配置）、延迟合并（缓冲处理、避免强制布局）、及时清理（销毁时disconnect、避免内存泄漏）。
核心原则就三点：精准监听、延迟合并、及时清理。
精准监听：只盯该管的节点和变化
监听范围越宽，开销越大。不要一上来就 observe(document.body) 或整个容器；而是用 querySelector 或 getElementById 锁定具体目标节点。配置上也得克制：
- 不需要监听后代节点时，subtree: false（默认值，别手滑改成 true）
- 只关心子节点增删？那就只开 childList: true，关掉 attributes 和 characterData
- 真要监听属性，用 attributeFilter 限定字段，比如
{ attributes: true, attributeFilter: ['data-id', 'aria-expanded'] }，避开 style、class 等高频变动属性
延迟合并：别让回调抢主线程的资源
MutationObserver 虽然已做微任务合并，但若回调里有 layout 触发操作（如 getBoundingClientRect）、DOM 查询或网络请求，仍会拖慢渲染。这时得主动缓冲：
- 用 setTimeout 或 requestIdleCallback 把实际处理推到空闲时段
- 回调中只做轻量记录（例如存下变更类型和节点引用），攒一批再统一解析
- 避免在回调里直接调用强制同步布局的方法；需要尺寸信息时，包一层 requestAnimationFrame
及时清理：挂了不关，等于埋内存泄漏
观察器长期存活却不释放，是单页应用中最常见的内存隐患之一。尤其组件卸载、弹窗关闭、路由切换时容易遗漏：
- 务必在销毁前调用 observer.disconnect()，这是硬性要求
- 避免闭包中隐式持有目标节点引用（比如回调函数里捕获了外层的 container 变量）
- 临时暂停监听可用 observer.takeRecords() 清空队列，再择机 resume
- 旧值记录（attributeOldValue / characterDataOldValue）按需开启，不用就关——它们会额外占用内存
不复杂但容易忽略。真正影响性能的往往不是 MutationObserver 本身，而是它被放在哪里、监听什么、以及谁来收尾。
