MutationObserver触发过晚丢失DOM上下文，如何准确定位<img>插入位置？

核心问题拆解 #

你遇到的这个问题确实挺棘手的——当使用MutationObserver监听DOM变更来同步两个文档实例时，如果<img>的前后兄弟节点先被移除，等回调触发时，<img>的上下文已经丢失，根本没法直接确定它原本的插入位置。而且这个问题在Chrome、Firefox、IE11中都能复现，遍历整个文档虽然能找到变更，但完全抵消了MutationObserver的性能优势，肯定不是最优解。

针对性解决方案 #

这里有几个实用思路，既能保留MutationObserver的性能优势，又能准确追踪<img>的位置：

1. 提前标记节点的上下文信息 #

在源文档中，给每个可能被操作的节点（包括<img>）提前附加唯一标识，同时记录它的父节点标识和相邻兄弟节点标识。这样即使兄弟节点被移除，你也能通过存储的上下文信息，在同步时还原它的位置：

// 给节点添加唯一标识与上下文信息
function markNode(node) {
  if (!node.dataset.nodeId) {
    node.dataset.nodeId = `node-${Date.now()}-${Math.random().toString(36).slice(2)}`;
  }
  // 记录父节点ID
  if (node.parentNode?.dataset.nodeId) {
    node.dataset.parentId = node.parentNode.dataset.nodeId;
  }
  // 记录前兄弟节点ID
  if (node.previousSibling?.dataset.nodeId) {
    node.dataset.prevSiblingId = node.previousSibling.dataset.nodeId;
  }
}

// MutationObserver回调中通过标识定位插入位置
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.tagName === 'IMG') {
        const targetParent = targetDocument.querySelector(`[data-node-id="${node.dataset.parentId}"]`);
        const targetPrevSibling = targetDocument.querySelector(`[data-node-id="${node.dataset.prevSiblingId}"]`);
        
        if (targetParent) {
          // 根据前兄弟位置插入克隆节点
          targetParent.insertBefore(node.cloneNode(true), targetPrevSibling?.nextSibling || null);
        }
      }
    });
  });
});

2. 优先捕获新增节点的快照信息 #

虽然回调触发时兄弟节点可能已被移除，但MutationRecord里的addedNodes节点，在回调触发的瞬间还保留着插入时的previousSibling和nextSibling引用（哪怕这些兄弟已从DOM中移除）。你可以在回调的第一时间就保存这些快照信息，避免后续处理时丢失：

const observer = new MutationObserver((mutations) => {
  // 先收集所有新增节点的位置快照
  const nodePositionCache = new Map();
  
  mutations.forEach(mutation => {
    // 先处理新增节点，保存位置
    mutation.addedNodes.forEach(node => {
      if (node.tagName === 'IMG') {
        nodePositionCache.set(node, {
          parent: node.parentNode,
          prevSibling: node.previousSibling,
          nextSibling: node.nextSibling
        });
      }
    });
    // 再处理节点移除逻辑
    mutation.removedNodes.forEach(node => {
      // 这里处理移除同步，不影响已收集的位置快照
    });
  });

  // 根据快照同步到目标文档
  nodePositionCache.forEach((pos, sourceNode) => {
    const clonedImg = sourceNode.cloneNode(true);
    const targetParent = findTargetNode(pos.parent);
    const targetPrev = findTargetNode(pos.prevSibling);

    if (targetParent) {
      targetParent.insertBefore(clonedImg, targetPrev?.nextSibling || targetParent.firstChild);
    }
  });
});

// 辅助函数：根据源节点标识找到目标文档对应节点
function findTargetNode(sourceNode) {
  return sourceNode ? targetDocument.querySelector(`[data-node-id="${sourceNode.dataset.nodeId}"]`) : null;
}

3. 调整MutationObserver监听配置 #

默认的监听配置可能会合并连续DOM操作的回调，你可以开启更细粒度的监听，减少变更合并的影响：

observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: false,
  characterData: false,
  // 禁用变更合并，尽可能实时触发回调（注意：可能增加性能开销，按需使用）
  mutationBatchSize: 1
});

总结 #

这几个方案的核心都是在节点上下文还存在时，提前捕获并保存位置信息，避免等到兄弟节点被移除后再追溯。其中提前标记节点标识的方案兼容性最好，适合跨浏览器场景（包括IE11）；利用快照信息的方案代码更简洁，不需要额外修改节点属性，但要注意回调中处理顺序的优先级。

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