异步Parent.js注入Child.js时偶现DOM不可见但已执行问题

你遇到的核心问题是同步读取LocalStorage时，脚本注入时机与DOM解析流程的竞争：

• 首次加载时，API请求的异步等待让DOM有足够时间解析到parent.js所在的body位置，插入child.js时能被DOM树正确捕获并显示；
• 二次加载时，LocalStorage读取是同步操作，注入child.js的速度远快于当前body节点的DOM解析，浏览器可能在处理parent.js所在的DOM节点时，直接执行了脚本的加载逻辑，但未将child.js元素同步到DOM树的可视化节点列表中（但脚本本身已被浏览器的JS引擎处理，所以会执行且在Sources中可见）。

1. 基于当前脚本位置精准插入，避免DOM解析竞争 #

修改parent.js中注入child.js的逻辑，以当前parent.js的script元素为锚点插入，确保元素被正确挂载到DOM树：

function injectChildScript(version) {
  const childScript = document.createElement('script');
  childScript.src = `https://example.com/${version}/child.js`;
  childScript.id = `child-script-${version}`; // 添加唯一标识方便排查

  // 获取当前执行的parent.js脚本元素
  const currentScript = document.currentScript || 
                        document.querySelector('script[src="https://example.com/parent.js"]');
  
  if (currentScript && currentScript.parentNode) {
    // 插入到parent.js脚本的下一个节点位置
    currentScript.parentNode.insertBefore(childScript, currentScript.nextSibling);
  } else {
    // 降级方案：插入到body末尾
    document.body.appendChild(childScript);
  }
}

2. 用微任务延迟注入，错开DOM解析时序 #

将读取LocalStorage后的注入逻辑包裹在微任务中，让DOM先完成当前节点的解析，再执行脚本插入：

// 版本检查逻辑
const savedVersion = localStorage.getItem('scriptVersion');
if (savedVersion) {
  // 微任务延迟，避免同步操作与DOM解析冲突
  Promise.resolve().then(() => {
    injectChildScript(savedVersion);
  });
} else {
  // 原有API请求逻辑保持不变
  fetch('/api/get-latest-version')
    .then(res => res.json())
    .then(data => {
      localStorage.setItem('scriptVersion', data.version);
      injectChildScript(data.version);
    })
    .catch(err => console.error('Failed to fetch version:', err));
}

3. 排查页面其他干扰逻辑 #

• 检查页面是否存在自动清理动态脚本的逻辑（比如某些内容管理系统的DOM清理规则）；
• 确认浏览器的内容安全策略（CSP）是否允许动态注入脚本，虽然脚本已执行，但可能影响DOM节点的显示；
• 用document.getElementById('child-script-${version}')在控制台手动查询，确认元素是否真的未被插入，还是开发者工具的显示延迟。

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