MutationObserver回调持续触发致页面卡顿，如何解决？

你遇到的无限循环卡顿，本质是重置标题的操作会再次触发MutationObserver的回调：

• 页面标题被修改→触发Observer回调resetTitle
• 回调里修改document.title→又触发title元素的内容变更
• 变更再次被Observer捕获→回调重复执行，形成无限循环

核心思路是打破这个循环，下面两种方案都能解决问题：

方案一：临时暂停观察者（推荐） #

在重置标题前先断开监听，修改完成后再重新启动，避免修改行为被再次捕获：

function resetTitle(mutations) {
    // 先断开观察者，阻止修改标题触发新回调
    observer.disconnect();
    const originalTitle = mutations[0].oldValue;
    // 只有当前标题和原始标题不同时才重置，减少无效操作
    if (document.title !== originalTitle) {
        document.title = originalTitle;
        console.info("Reset the page title.");
    }
    // 重新开启监听，继续监控后续标题变化
    observer.observe(document.querySelector('title'), {
        childList: true,
        subtree: true,
        characterDataOldValue: true
    });
}

let observer = new MutationObserver(resetTitle);

observer.observe(document.querySelector('title'), {
    childList: true,
    subtree: true,
    characterDataOldValue: true
});

方案二：用状态标记跳过循环 #

设置一个临时标记，在重置标题时跳过回调执行：

let isResetting = false;

function resetTitle(mutations) {
    if (isResetting) return; // 正在重置时直接返回，避免循环
    const originalTitle = mutations[0].oldValue;
    if (document.title !== originalTitle) {
        isResetting = true;
        document.title = originalTitle;
        console.info("Reset the page title.");
        isResetting = false;
    }
}

let observer = new MutationObserver(resetTitle);

observer.observe(document.querySelector('title'), {
    childList: true,
    subtree: true,
    characterDataOldValue: true
});

可以提前保存页面的原始标题，不用每次从mutation里取，更稳定：

// 提前存好初始标题
const originalTitle = document.title;

function resetTitle() {
    observer.disconnect();
    if (document.title !== originalTitle) {
        document.title = originalTitle;
        console.info("Reset the page title.");
    }
    observer.observe(document.querySelector('title'), {
        childList: true,
        subtree: true,
        characterDataOldValue: true
    });
}

let observer = new MutationObserver(resetTitle);

observer.observe(document.querySelector('title'), {
    childList: true,
    subtree: true,
    characterDataOldValue: true
});

内容的提问来源于stack exchange，提问作者lshillman