如何用Observer()函数替代循环实现链接替换？求技术指导

你当前用定时轮询的方式虽然能实现需求，但每1秒遍历整个DOM查找目标图片，会持续消耗CPU资源，尤其是页面元素较多时影响更明显。MutationObserver是浏览器提供的API，能监听DOM的变化，只有当目标元素新增或属性修改时才触发处理，效率高很多。

实现步骤与代码示例 #

首先把图片替换逻辑抽成独立函数，方便复用：

function replaceImageSrc(image) {
  // 只处理目标域名的图片，避免重复替换
  if (image.src.startsWith('https://media.app.net/attachments')) {
    image.src = image.src.replace('https://media.app.net/attachments', 'https://cdn.app.com/attachments');
  }
}

然后创建并配置MutationObserver：

// 创建Observer实例，处理DOM变化回调
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 处理新增的DOM节点
    if (mutation.addedNodes.length) {
      mutation.addedNodes.forEach((node) => {
        // 若新增节点是img，直接处理
        if (node.tagName === 'IMG') {
          replaceImageSrc(node);
        }
        // 若新增节点是容器，遍历内部的目标img
        else if (node.querySelectorAll) {
          node.querySelectorAll('img[src^="https://media.app.net/attachments"]').forEach(replaceImageSrc);
        }
      });
    }

    // 处理img的src属性被动态修改的情况
    if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
      replaceImageSrc(mutation.target);
    }
  });
});

// 配置监听规则
const observerConfig = {
  childList: true, // 监听子节点的添加/移除
  attributes: true, // 监听属性变化
  subtree: true, // 监听所有嵌套子节点
  attributeFilter: ['src'] // 只监听src属性，减少无效触发
};

// 启动监听，这里监听整个body，若知道图片只会出现在特定容器，替换成对应DOM元素更高效
observer.observe(document.body, observerConfig);

// 初始化处理页面已加载的图片
document.querySelectorAll('img[src^="https://media.app.net/attachments"]').forEach(replaceImageSrc);

关键细节说明 #

• subtree: true：确保能监听到嵌套在深层容器里的图片，比如图片被添加到某个div的子节点中时也能触发处理。
• attributeFilter: ['src']：只关注src属性的变化，避免其他属性（比如class、style）修改时触发不必要的回调。
• 初始化处理：Observer只会监听启动后的DOM变化，所以页面加载完成时已存在的图片需要单独处理一次。
• 目标容器优化：如果你的图片只会出现在某个特定容器（比如#image-container），把document.body换成该容器的DOM元素，能进一步缩小监听范围，提升性能。

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