资源重试本身不直接导致dom节点重复挂载，但会因iframe/img/script等元素重设src触发浏览器销毁旧节点并创建新节点；若回调中未移除旧节点就appendchild，便造成重复。
为什么资源重试会触发 DOM 节点重复挂载
资源重试本身不直接导致节点重复挂载，但它是 iframe、img、script 等元素在加载失败后重新设置 src 或 srcset 的常见诱因。一旦这些元素被 JS 主动重赋值（如 img.src = img.src），浏览器会将其视为“新请求”，并触发完整的加载生命周期：销毁旧节点 → 创建新节点 → 插入 DOM → 触发 load 或 error 回调。若回调里有 container.appendChild(newNode) 逻辑，而旧节点未被显式移除，就会造成视觉/结构上的重复。
如何快速定位是哪个资源重试引发的重复
打开 Chrome DevTools → Network 面板，勾选 “Preserve log” 和 “Disable cache”，然后复现问题。重点关注以下信号：
- 同一 URL 出现两次或以上请求，状态码为
404/503后紧跟一次200 - 该请求对应的资源元素（如
iframe#report-embed）在 Elements 面板中出现两个同名节点 - 在 Console 中执行
document.querySelectorAll('iframe[src*="report"]').length返回值 > 1 - 用
performance.getEntriesByType('resource')查看该 URL 是否多次出现在 entries 数组中（注意：它只记录成功加载的请求，失败重试不会计入）
避免重复挂载的核心防护措施
关键不是阻止重试，而是确保每次重试只对应一次 DOM 操作。最稳妥的做法是「绑定唯一性」+「清理前置状态」：
- 给每个动态加载的容器加唯一
dataset.id，例如<div data-id="report-iframe-container"></div> - 在插入新
iframe前，先执行container.querySelector('iframe')?.remove()，而不是无条件appendChild - 对
img元素，用onload+onerror统一管理状态机，避免在error回调里反复el.src = el.src - 禁止在
fetch失败回调中直接操作 DOM；应先更新状态（如isReloading = true），再由响应式逻辑统一渲染
容易被忽略的 iframe 边界情况
iframe 是重试导致重复挂载的高发区，尤其在 SPA 中监听路由后动态加载时：
- 如果用
history.pushState切换路由，但没清理上一个iframe，下次进入相同路径会新建一个，旧的仍驻留在 DOM 中（即使已不可见） -
iframe.contentDocument在加载中为null，直接读取会报错；应监听load事件后再访问，且需判断iframe.contentDocument?.readyState === 'complete' - 某些 CDN 或 SSO 页面会主动
document.write覆盖整个iframe内容，这会导致其内部节点全部重建，但外层iframe元素引用不变——此时用querySelectorAll查不到“重复”，但内存中已存在多份 detached 子树
display: none 却没调 remove()，或者依赖 disconnectedCallback 清理却忘了它根本不会被调用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
