Chrome扩展中用MutationObserver处理滚动加载元素的性能优化问询

一、等待第一个目标元素出现 #

不用监听整个body，直接写精准的等待函数，只关注目标选择器对应的元素：

function waitForElement(selector) {
  return new Promise(resolve => {
    // 先检查元素是否已存在
    const existing = document.querySelector(selector);
    if (existing) {
      return resolve(existing);
    }

    // 用MutationObserver监听节点新增事件
    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        if (mutation.addedNodes.length) {
          const target = document.querySelector(selector);
          if (target) {
            resolve(target);
            observer.disconnect();
            break;
          }
        }
      }
    });

    // 仅监听必要的变更类型，减少触发次数
    observer.observe(document, {
      childList: true,
      subtree: true,
      attributes: false,
      characterData: false
    });
  });
}

// 使用示例：等第一个目标span出现后初始化滚动监听
waitForElement('#metadata-line span:nth-child(4)').then(() => {
  initScrollObserver();
});

二、高效监听滚动加载的新元素 #

核心是缩小监听范围，不要监听整个DOM树。YouTube搜索结果的视频项都固定在#contents容器下，直接监听这个容器的子节点变化即可：

function initScrollObserver() {
  const container = document.querySelector('#contents');
  if (!container) return;

  // 标记已处理元素，避免重复操作
  const processedFlag = 'data-handled';

  // 定义单个目标元素的处理逻辑
  function processSpan(span) {
    if (span.hasAttribute(processedFlag)) return;
    // 这里替换成你要插入文本的逻辑
    span.textContent = `[自定义前缀] ${span.textContent}`;
    span.setAttribute(processedFlag, 'true');
  }

  // 先处理页面已存在的所有目标元素
  document.querySelectorAll('#metadata-line span:nth-child(4)').forEach(processSpan);

  // 创建Observer，仅监听容器的子节点新增
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        // 只处理元素节点
        if (node.nodeType !== Node.ELEMENT_NODE) return;
        // 查找当前新增节点内的目标span并处理
        const targetSpans = node.querySelectorAll('#metadata-line span:nth-child(4)');
        targetSpans.forEach(processSpan);
      });
    });
  });

  // 仅监听容器的子节点变化，无需遍历整个子树
  observer.observe(container, {
    childList: true,
    subtree: false,
    attributes: false,
    characterData: false
  });
}

性能优化说明 #

1. 缩小监听范围：直接监听视频结果的父容器#contents，而非整个document，大幅减少Observer的触发次数。
2. 避免重复处理：用自定义属性标记已处理元素，防止同一元素被多次操作。
3. 精准监听配置：仅开启childList: true，关闭不必要的属性、文本变更监听，减少回调触发频率。

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