MutationObserver 回调不触发的主因是 target 未挂载或 options 缺失 childList: true；需确保 target 已在 DOM 中、设 subtree: true 监听后代、在 DOMContentLoaded 后初始化，并注意 callback 中 node.isConnected 判断及避免重复监听。
MutationObserver 回调不触发？检查 target 和 options 配置
绝大多数“新增节点没监听到”的问题，根源不在代码逻辑，而在 MutationObserver 实例的初始化配置。它不会自动递归监听子树，也不会默认监听所有变化类型。
-
target必须是已挂载到 DOM 的真实节点（不能是 document fragment 或未 append 的元素） -
options至少要设{ childList: true }，否则新增/删除子节点完全无响应 - 如果想监听动态插入的后代节点（比如组件内部渲染的新
div），必须加subtree: true - 只监听新增不监听移除？那就别开
characterData或attributes，避免误触发
监听 document.body 但页面懒加载内容没反应？注意 timing 问题
在 DOMContentLoaded 之前创建 observer，target 可能还不存在；太晚创建，又可能错过首屏动态插入。尤其 SPA 或含 hydration 的 SSR 页面，body 子节点常在 JS 执行后才批量挂载。
- 推荐在
document.readyState === 'interactive'或DOMContentLoaded后立即初始化 observer - 如果目标是监听后续框架（如 React/Vue）挂载的内容，确保 observer 在框架 mount 完成后再启动（例如 Vue 的
mounted钩子、React 的useEffect(() => {}, [])） - 不要用
setTimeout等“看起来差不多了”——DOM 插入是同步的，但框架调度不是
callback 里拿不到最新 DOM？MutationRecord 是快照，不是实时引用
MutationRecord 对象里的 addedNodes、removedNodes 是当时变更的静态快照，不是持续更新的 live collection。如果你在回调里查 node.parentNode 或 node.children，可能得到空或过期结果。
- 新增节点刚插入时，其
parentNode已存在，但兄弟节点可能还没渲染完成（比如 CSS 动画中） - 需要确认节点是否真正“可用”，建议加一层
node.isConnected判断（兼容性好，IE 不支持，但现代项目基本可忽略） - 避免在 callback 中直接操作大量节点——MutationObserver 是微任务，频繁 DOM 写操作会阻塞渲染，改用
requestIdleCallback或节流
多个 observer 监听同一区域？注意触发顺序和重复处理
没有全局去重机制。两个 observer 都监听 body 且都设了 subtree: true，同一个 div 插入会分别触发两次 callback，容易引发重复初始化、绑定、请求等问题。
立即学习“前端免费学习笔记（深入）”；
- 优先用单例模式管理 observer，按需增删
observe()/unobserve()，而不是反复 new - 如果必须多处监听，callback 开头加唯一标识判断（比如检查
record.target.dataset.observed） - Chrome DevTools 的 Elements 面板里右键节点 → “Break on” → “Subtree modifications”，能直观看到哪些 observer 正在响应，比 console.log 更准
最麻烦的其实是异步插入 + 多层封装后的 observer 生命周期管理：谁创建、谁销毁、销毁时机是否早于插入完成——这些没法靠配置项解决，得靠代码里明确的责任边界。
