如何监测网站内容变更？Tampermonkey脚本优化咨询

用setInterval确实能实现需求，但它不是最优解，主要问题有：

• 性能浪费：不管页面内容有没有变化，都会定时执行DOM查询和操作，尤其是你没设置执行间隔（默认0毫秒），会导致脚本高频运行，严重消耗浏览器资源，甚至引发页面卡顿。
• 可读性差：链式调用querySelector的写法过于冗长，一旦某个节点不存在，会直接抛出错误，排查问题也麻烦。
• 逻辑冗余：每次轮询都重复执行标题后缀替换，哪怕标题已经处理过了。

相比定时轮询，MutationObserver是浏览器提供的专门监听DOM变化的API，只有当目标元素或其相关节点发生变化时才触发逻辑，性能更高效，也更贴合需求。同时我们可以优化代码结构，提升可读性：

// 封装标题更新逻辑，复用性更强
function updatePageTitle() {
    // 合并链式选择器，简化DOM查询，同时避免链式调用的潜在错误
    const activeSettingsText = document.querySelector('[class$="dd_sublinks sel"] .dd_sublinks_linkto .setuplink .setuplink_text');
    
    if (activeSettingsText) {
        document.title = activeSettingsText.textContent.trim();
    }

    // 优化后缀替换逻辑：用endsWith更精准，且只在需要时执行
    const DEFAULT_TITLE_ENDING = ' - Zoho CRM';
    if (document.title.endsWith(DEFAULT_TITLE_ENDING)) {
        document.title = document.title.slice(0, -DEFAULT_TITLE_ENDING.length);
    }
}

// 初始加载时先执行一次
updatePageTitle();

// 监听DOM变化：选择最接近目标元素的父容器，缩小监听范围提升性能
const targetContainer = document.body; // 建议替换成目标元素的直接父容器，比如document.querySelector('.dd_sublinks_wrapper')
const observerConfig = {
    childList: true, // 监听子元素的添加/移除
    subtree: true    // 监听子树的变化
};

// 创建观察者实例
const titleObserver = new MutationObserver((mutations) => {
    // 每次DOM变化时更新标题
    updatePageTitle();
});

// 启动监听
titleObserver.observe(targetContainer, observerConfig);

// 页面卸载时断开监听，避免内存泄漏
window.addEventListener('unload', () => {
    titleObserver.disconnect();
});

• 性能更优：仅在DOM实际变化时执行逻辑，避免无意义的轮询消耗。
• 代码更健壮：合并选择器后，即使某个节点不存在，querySelector只会返回null，不会抛出错误；封装函数让逻辑更清晰，便于维护。
• 逻辑更精准：用endsWith判断后缀，比includes更准确，避免误替换标题中包含相同字符串的内容。

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