资源加载失败自动重试会导致appendchild重复执行，若未清理已挂载dom节点或未做存在性校验（如document.queryselector检查script是否已存在），将引发组件重复渲染、事件监听器重复绑定等问题。
资源加载失败后自动重试会重复执行 appendChild
当脚本通过 onerror 触发重试逻辑（比如 location.reload(true) 或动态插入新 <script></script>），而重试前未清理已挂载的 DOM 节点，就会导致同一模块被多次插入。典型现象是：控制台没报错，但页面上某个组件渲染了两遍，或事件监听器被绑定多次。
常见于以下场景：
- 使用
script标签的onerror回调中直接调用document.head.appendChild(newScript)，但没判断该 script 是否已存在 - 构建工具注入的 fallback 逻辑未做去重校验，例如 webpack 的
script-ext-html-webpack-plugin配置了value: 'onError(this)'，但onError函数里只管加载不管查重 - 手动实现的资源加载器（如
require）在script.onload和script.onerror中都调用了回调，且未设防重入标记
moduleList 缓存机制必须包含 DOM 节点状态校验
仅靠 moduleList 记录“是否加载过”不够——它只管 JS 模块是否执行过，不保证对应 DOM 节点没被重复插入。比如一个 UI 组件初始化时向 document.body 插入容器 div，若重试发生，require('ui-widget') 可能返回成功，但 DOM 已多出一个同名节点。
安全做法是把 DOM 存在性也纳入校验：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 插入前先用
document.getElementById或document.querySelector查找目标容器是否存在 - 若存在，直接 return；若不存在，再创建并插入
- 避免依赖 ID —— 多实例组件应改用 class + 数据属性组合定位，例如
[data-module="chart"][data-id="dashboard-1"]
动态插入脚本时，document.write 与 appendChild 的行为差异
document.write 在页面加载完成后调用会清空整个文档，而 appendChild 是增量操作。但在重试场景下，两者都可能造成重复——区别在于前者更隐蔽：它不会留下多个节点，而是把旧内容全干掉再重来，容易掩盖问题；后者则直接暴露重复节点。
真正要防范的是“无条件插入”这个动作本身：
- 不要写
head.appendChild(script)这种裸调用 - 改成
if (!document.querySelector(`script[src="${src}"]`)) { head.appendChild(script); } - 注意：DOMParser 解析的 HTML 字符串中若含 script 标签，
insertAdjacentHTML会自动执行其中 JS，也可能触发二次加载——这种间接注入同样需去重
DOM 重复注入的调试定位技巧
浏览器开发者工具里看不到明显异常，但实际已有两个相同结构的节点。快速确认方式：
- 在控制台执行
document.querySelectorAll('.my-widget').length，结果大于 1 就说明重复了 - 右键检查元素 → 查看“Event Listeners”，发现同一事件类型绑定了多个 handler（尤其 click、input）
- 打断点到插入逻辑处，观察每次执行时
parentNode.children的 length 是否递增 - 对关键节点加
console.log(node, 'inserted at', Date.now())，比对时间戳和节点引用是否一致
最麻烦的情况是：重复节点结构完全一致、ID 相同、甚至 data 属性也一样——此时仅靠肉眼无法区分，必须靠引用比对或插入时打唯一标记。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
