MutationObserver

在 Web 开发中，MutationObserver 就像是一个潜伏在 DOM 树里的“私家侦探”。它不参与业务逻辑的直接执行，而是静静地观察你指定的 DOM 节点，一旦节点发生了增删、属性修改或文本变动，它就会立刻记录下来并执行你预设的回调。

相比于已经废弃的 MutationEvents（那玩意儿每变动一下就触发一次，非常消耗性能），MutationObserver 是异步执行的。它会等待当前所有 DOM 操作完成后，把所有的变动打包成一个“批次”发给你，这让它在处理高频变动时表现得非常优雅。

---

核心应用场景与代码实现

1. 自动滚动的聊天窗口或日志监控

这是最经典的场景。当新消息不断插入容器底部时，你需要实时计算滚动高度并将窗口滚动到最下方。

JavaScript

const targetNode = document.getElementById('chat-box');

// 配置观察选项：只观察子节点的变动
const config = { childList: true };

const callback = (mutationsList) => {
    for (const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('检测到新消息插入');
            // 自动滚动到底部
            targetNode.scrollTop = targetNode.scrollHeight;
        }
    }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

2. 防止非法篡改 DOM（如水印保护）

很多企业级应用会在页面上覆盖一层透明的“水印” DIV。聪明的用户可能会通过 Chrome 控制台直接删掉这个节点或修改其 CSS。MutationObserver 可以瞬间发现并“打回原形”。

JavaScript

const watermark = document.getElementById('watermark');

const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        // 如果水印被删除，或者样式被修改
        if (mutation.removedNodes.length || mutation.type === 'attributes') {
            console.warn('警告：检测到非法篡改水印！正在恢复...');
            // 停止观察，防止无限递归
            observer.disconnect();
            // 这里可以重新渲染水印，或者直接刷新页面
            document.body.appendChild(watermark);
            // 重新开始观察
            observer.observe(watermark, config);
        }
    });
});

observer.observe(watermark, { attributes: true, childList: true, subtree: true });

3. 第三方脚本的动态注入监控

如果你在做一个浏览器插件或者基础架构监控，你需要知道页面上什么时候多出了一个 <script> 标签（可能是广告插件或统计代码），从而进行拦截或分析。

JavaScript

const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
            if (node.tagName === 'SCRIPT') {
                console.log(`检测到脚本注入: ${node.src}`);
                // 可以在这里进行安全过滤
            }
        });
    });
});

observer.observe(document.documentElement, { childList: true, subtree: true });

---

避坑指南：性能与细节

虽然 MutationObserver 性能很好，但如果不注意以下两点，还是会出问题：

1. 无限递归循环：如果你在 MutationObserver 的回调函数里又去修改了被观察的那个 DOM，那么回调会再次被触发。

   • 对策：在修改前先调用 observer.disconnect()，修改完后再 observe()；或者在回调逻辑中加入判断条件。

2. 内存泄漏：当你的 DOM 节点被销毁时，虽然现代浏览器会自动回收，但养成手动销毁观察者的习惯总是好的。

   • 操作：在组件卸载或逻辑结束时执行 observer.disconnect()。

常用参数速查表

参数	含义
childList	观察子节点的增删（最常用）。
attributes	观察属性的变化（比如 class, style, data-id）。
subtree	深度优先，不仅观察目标节点，还观察它所有的后代节点。
characterData	观察文本节点的内容变化。
attributeOldValue	记录变动前的属性值，方便对比。

---

MutationObserver 的本质是提供了一种非侵入式的 DOM 监控手段，它让你不需要去改写原有的业务逻辑（比如不用在每一个 appendChild 后面都写一段逻辑），就能对页面变动做出响应。

你想了解一下它与 IntersectionObserver（观察元素是否进入视野）在性能优化上的区别，还是想看它在 Vue/React 框架里的具体封装案例？