条件启用type="module"的Script标签遇问题，修改DOM是否可行？

为什么修改type属性后脚本不加载？ #

浏览器在首次解析HTML中的<script>标签时，会根据当时的type属性值决定是否加载并执行脚本。一旦浏览器完成对该标签的初始处理，后续修改type属性不会触发重新加载——浏览器不会回头重新处理已经解析过的元素。

你的思路是正确的，可做细节优化 #

你提到的「重新添加到DOM」的思路完全正确，只有新插入DOM的<script>元素才会被浏览器重新触发加载执行流程。不过直接移动原元素可能会改变它在DOM中的位置，若脚本依赖执行顺序，可能引发问题。推荐用克隆元素的方式处理：

document.querySelectorAll('script[type="text/skip-hydration"]').forEach((script) => {
  // 克隆原脚本元素，保留所有属性（src、async等）
  const newScript = script.cloneNode(true);
  // 设置正确的type属性
  newScript.setAttribute('type', 'module');
  // 给原元素修改type，避免后续重复处理
  script.setAttribute('type', 'text/javascript');
  // 将新脚本添加到DOM，触发加载执行
  document.body.appendChild(newScript);
});

补充说明 #

• 对于带src的外部脚本，克隆后添加到DOM会重新发起请求（浏览器缓存命中时会读取缓存）
• 对于内联脚本（无src），克隆方式同样能正常执行
• 如果原脚本带有async/defer属性，克隆后的元素会保留这些行为，不影响加载顺序

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