性能监控需监听具体业务容器（如#app），确认节点已挂载，仅启用childList: true，避免subtree: true滥用；addedNodes遍历时禁用Array.from；务必在组件卸载时调用observer.disconnect()防止内存泄漏。
监听目标必须是具体容器，不能用 document.body
大规模性能监控系统里，直接监听 document.body 会捕获广告 SDK 插入的 script、客服浮窗切换 class、埋点脚本动态加 data 属性等全部无关变更，1 秒内回调数百次，主线程直接卡死。真实场景中，监控目标应限定为业务核心容器，比如 #app、.content-area 或 [data-monitor="true"]。必须确认节点已挂载：调用 observe() 前检查 targetNode?.isConnected === true，否则静默失效。
childList 和 subtree 配置要按层级精度开
盲目启用 subtree: true 是高频误配。它会让 observer 监听整个子树任意嵌套变更，而性能监控只需捕获「业务区域结构变动」：
- 只关心用户主动插入的卡片、列表项等一级子节点 → 仅设
childList: true - 需捕获富文本编辑器内部深层渲染（如
#editor > .ProseMirror > p）→ 才加subtree: true - 绝对不要对
document.documentElement或document开subtree: true，这等于监听整页 DOM 树，包括head中动态插入的style和link
addedNodes 遍历必须避免强制转数组
单次 mutation 可能含数十个 addedNodes，直接 Array.from(mutation.addedNodes) 会触发 NodeList 的 DOM 查询开销，叠加高频回调极易卡顿：
- 用
mutation.addedNodes.forEach(node => { if (node.nodeType === 1) { /* 处理元素节点 */ } })替代数组转换 - 若只需标记「有新结构」，连遍历都可跳过，直接置位全局
dirtyflag - 对聊天消息流等高频插入场景，用
Set缓存已处理的node.id或node.isSameNode()结果，防止重复上报
observer.disconnect() 不只是卸载，更是内存泄漏防火墙
监控系统常驻运行，但页面路由切换、SPA 子应用卸载、弹窗关闭时若未调用 observer.disconnect()，observer 实例会持续持有对旧 DOM 节点的强引用，导致节点无法 GC，内存缓慢上涨：
立即学习“前端免费学习笔记（深入）”；
- Vue 中在
onBeforeUnmount执行断开 - React 中
useEffect返回函数里调用disconnect() - 使用单例 observer 管理多个 target 时，断开前需确认 target 已从文档移除，否则下次
observe()可能报错
真正容易被忽略的是：observer 实例本身不自动释放，哪怕 target 节点已被 removeChild，只要没调 disconnect，它仍会静默存活并占用内存。
