MutationObserver能实时监测DOM结构变化，它在DOM提交渲染前以微任务方式异步触发回调，通过正确配置childList和subtree可监听所有层级节点增删，但不监听样式、value值或动画等非结构变更。
MutationObserver 能否实时监测 DOM 变化
能，MutationObserver 是 HTML5 原生提供的、目前最可靠且性能可控的 DOM 变化监听机制。它不轮询，不依赖 setTimeout 或 setInterval，而是由浏览器在 DOM 提交渲染前触发回调，属于“异步但有序”的微任务级响应。
常见误判是认为它“监听不到动态插入的子元素”——实际是配置项没开对。关键看 childList 和 subtree 两个布尔参数：
-
childList: true→ 监听直接子节点增删 -
subtree: true→ 同时监听所有后代节点（含深层嵌套） - 若只设
childList: true但未设subtree: true，则深层动态插入（如el.querySelector('.container').innerHTML = '）将不会触发回调text'
哪些 DOM 变化 MutationObserver 监听不到
它监听的是“结构变更”，不是“样式或属性语义变更”。以下情况默认不触发：
- 仅修改
style属性（如el.style.color = 'red'），除非显式开启attributes: true并指定attributeFilter: ['style'] - 文本内容变更（
textContent/innerText改变）需开启characterData: true，且目标节点必须是Text节点（不是 Element） -
input输入框的值变化（value属性）属于表单状态，不在 DOM 结构变更范围内；需用input事件监听 - 通过
CSS Animations或transform引起的视觉位移，无 DOM 结构变动，完全不可见
与旧方案（DOMSubtreeModified、DOMNodeInserted）对比
这些老接口已在现代浏览器中被废弃（Chrome 80+、Firefox 72+ 彻底移除），不仅性能极差（同步触发、阻塞渲染），而且无法批量合并变更，容易引发无限循环。例如：
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('DOMNodeInserted', () => {
// 每次插入都触发，哪怕一次 append 10 个节点，也调 10 次
target.appendChild(document.createElement('div')); // 又触发一次，死循环
});
MutationObserver 天然批处理：同一宏任务内多次 DOM 修改，只汇总为一次回调，mutations 数组里包含全部变更记录，可按需过滤或跳过。
兼容性方面：IE 完全不支持，Edge 12+、Chrome 26+、Firefox 14+、Safari 6+ 均可用；若需 IE 支持，只能降级为轮询 + document.body.innerHTML 字符串比对（不推荐，仅应急）。
监听受限的根本原因不是 API，而是浏览器设计原则
HTML 规范明确区分“结构层”和“表现层”。MutationObserver 属于结构监听器，它的职责边界很清晰：只管节点树增删改、属性变更、文本数据更新。它不监听布局计算、绘制结果、合成图层变化，也不感知 JS 对象引用或框架内部状态（如 React 的 useState、Vue 的响应式依赖）。所谓“监听受限”，其实是把不同职责混为一谈了。
真正需要跨层捕获时，得组合使用：
- 结构变化 →
MutationObserver - 用户输入 →
input/change/keydown - 样式生效 →
requestAnimationFrame+getComputedStyle（注意节流） - 布局变动 →
ResizeObserver（监听尺寸）、IntersectionObserver（监听可见性）
试图用一个 API 解决所有“页面变了”的问题，反而会让逻辑耦合、调试困难。浏览器有意保持这种分层隔离。
