原生JavaScript怎么动态重新加载JS文件

一、为什么直接修改 script.src 无法重新加载脚本

很多初学者在需要重新加载脚本时，直觉会尝试通过 document.getElementById('my-script').src = 'app.js' 来触发重新运行。然而在浏览器实际运行中，网络面板不会产生任何新的网络请求，脚本代码也不会再次执行。

这是由 W3C 与 WHATWG 的 HTML 规范严格规定的：每一个 HTMLScriptElement 节点在首次连接到文档（DOM）并完成资源获取与编译后，其内部的 already started 内部状态标志位就会被固定标记为 true。一旦该标志位被置位，后续对该节点 src、type 或其他属性的任何修改，都不会让浏览器重新执行“准备脚本”（Prepare a script）算法。

因此，若要让浏览器把一份代码视作“新脚本”重新拉取并执行求值，必须通过 document.createElement('script') 生成一个未初始化的全新元素实例，并在完成参数配置后重新挂载至 DOM 树。

二、核心操作步骤：节点替换与防缓存加载机制

实现经典脚本（Classic Script）动态重载的标准工序分为五个紧密相关的操作环节，每一步都需要兼顾 DOM 生命周期与网络缓存策略。

1. 定位并清理已有脚本节点

为便于精确定位，建议为需要动态维护的脚本分配明确的 id 或 data-script-id 自定义属性。在发起重载前，先检查页面中是否存在历史节点并调用 remove() 进行注销：

const oldScript = document.getElementById('app-module');
if (oldScript) {
  // 从 DOM 树中物理移除旧节点
  oldScript.remove();
}

2. 构造防缓存（Cache-Busting）URL

现代浏览器对静态资源有强烈的缓存倾向。如果仅仅删旧建新，但请求的 URL 维持原样，浏览器将直接从 Memory Cache 或 Disk Cache 读取旧版本二进制字节，并在网络面板返回 (from memory cache) 或 304 Not Modified，导致新修改的代码依然无法加载。

通过在 URL 查询参数（Query String）中注入唯一的时间戳或版本哈希，可以使浏览器网络层将其判定为全新资源从而穿透缓存：

function buildBustCacheUrl(rawUrl) {
  const url = new URL(rawUrl, window.location.href);
  // 使用微秒级时间戳确保请求 URL 的绝对唯一性
  url.searchParams.set('_t', Date.now());
  return url.toString();
}

3. 构建新 Script 节点并挂载至文档

接下来创建新的节点，并绑定 onload 与 onerror 事件，确保对脚本加载完成或加载故障建立确定性的通知回调机制：

function reloadScript(scriptId, url) {
  return new Promise((resolve, reject) => {
    // 1. 移除旧节点
    const existing = document.getElementById(scriptId);
    if (existing) {
      existing.remove();
    }

    // 2. 创建新节点
    const script = document.createElement('script');
    script.id = scriptId;
    script.type = 'text/javascript';
    script.src = buildBustCacheUrl(url);

    // 3. 监听加载结果
    script.onload = () => {
      resolve(script);
    };
    script.onerror = (err) => {
      reject(new Error(`脚本加载失败: ${url}`));
    };

    // 4. 插入文档 head 触发解析与运行
    document.head.appendChild(script);
  });
}

三、不可忽视的隐患：全局状态污染与副作用清理

如果不做主动清理，随着脚本不断重新载入，旧的定时器依然在后台消耗 CPU 与内存，同一个点击事件可能会被触发多次，导致严重的内存泄露与难以排查的逻辑错乱。

规范的解决方案是在可重载脚本内部规范化暴露注销（Cleanup）机制：

// 被加载的业务脚本 internal-module.js 中的规范设计
(function() {
  // 检查并注销上一轮残存的实例
  if (window.MyPlugin && typeof window.MyPlugin.destroy === 'function') {
    window.MyPlugin.destroy();
  }

  const timerId = setInterval(() => {
    console.log('Plugin heartbeat tick');
  }, 1000);

  const clickHandler = () => console.log('User clicked');
  window.addEventListener('click', clickHandler);

  // 暴露统一的销毁接口
  window.MyPlugin = {
    destroy() {
      clearInterval(timerId);
      window.removeEventListener('click', clickHandler);
      console.log('旧模块实例已彻底清理');
    }
  };
})();

四、ES Module (ESM) 环境下的动态重载机制

随着现代浏览器原生全面支持 ES 模块（即通过 <script type="module"> 或 import() 使用的代码），动态加载进入了原生语法支持的新时代。

在 ES 模块规范中，浏览器通过内部的 Module Map 对模块实例进行单例缓存。如果调用两次 import('./math.js')，哪怕第二次在数分钟之后触发，浏览器也只会执行一次模块代码，后续调用直接返回已完成求值的同一个模块命名空间对象（Module Namespace Object）。

在 ES 模块体系下实现动态重新加载，完全不需要创建或操作 DOM 节点，直接使用动态 import() 配合 URL 查询参数即可达到目的：

async function reloadEsModule(modulePath) {
  const bustCacheUrl = `${modulePath}?version=${Date.now()}`;
  
  try {
    // 动态 import 穿透 Module Map 缓存并获取全新导出的模块
    const newModule = await import(bustCacheUrl);
    
    if (typeof newModule.setup === 'function') {
      newModule.setup();
    }
    
    return newModule;
  } catch (err) {
    console.error('动态重载 ES Module 失败:', err);
    throw err;
  }
}

五、生产级完整封装：支持超时控制与异常降级

在真实业务生产环境中，网络可能出现抖动或丢包，脚本服务可能离线，或者由于 CDN 偶发故障导致响应迟缓。如果缺乏保护，未设置超时（Timeout）的脚本注入会让页面长时间停滞在未知状态。

下面是一个具备完整生命周期管理、超时拦截、跨域凭证支持以及错误清理的生产级重载加载器：

/**
 * 生产级原生脚本动态重载工具函数
 * @param {string} url 目标脚本资源地址
 * @param {object} options 配置选项
 * @returns {Promise<HTMLScriptElement>}
 */
function dynamicReloadScript(url, options = {}) {
  const {
    id = 'dynamic-reloaded-script',
    timeout = 8000, // 默认 8 秒超时
    crossOrigin = 'anonymous',
    cleanup = null
  } = options;

  return new Promise((resolve, reject) => {
    // 1. 执行使用者指定的预清理钩子
    if (typeof cleanup === 'function') {
      try {
        cleanup();
      } catch (e) {
        console.warn('预清理过程抛出异常，继续执行重载:', e);
      }
    }

    // 2. 清除 DOM 中现存的历史节点
    const previousNode = document.getElementById(id);
    if (previousNode) {
      previousNode.remove();
    }

    // 3. 创建全新节点并初始化参数
    const script = document.createElement('script');
    script.id = id;
    script.type = 'text/javascript';
    if (crossOrigin) {
      script.crossOrigin = crossOrigin;
    }

    // 4. 构造防缓存 URL
    const targetUrl = new URL(url, window.location.href);
    targetUrl.searchParams.set('_reload_ts', Date.now());
    script.src = targetUrl.toString();

    // 5. 设置超时定时器
    let isFinished = false;
    const timeoutTimer = setTimeout(() => {
      if (isFinished) return;
      isFinished = true;
      script.onload = script.onerror = null;
      script.remove(); // 超时回收孤儿节点
      reject(new Error(`重载脚本超时 (耗时超过 ${timeout}ms): ${url}`));
    }, timeout);

    // 6. 成功回调
    script.onload = () => {
      if (isFinished) return;
      isFinished = true;
      clearTimeout(timeoutTimer);
      resolve(script);
    };

    // 7. 异常捕获
    script.onerror = (evt) => {
      if (isFinished) return;
      isFinished = true;
      clearTimeout(timeoutTimer);
      script.remove();
      reject(new Error(`脚本加载或执行发生网络级错误: ${url}`));
    };

    // 8. 挂载到 head 启动网络流
    document.head.appendChild(script);
  });
}

六、高频问题与安全限制排查

七、总结

在原生 JavaScript 中重新加载 JS 文件是一项综合性极强的技术操作：

• 对于经典脚本，核心手段必须是“销毁旧节点 + 创建带时间戳新节点 + DOM 插入”，绝不能依赖修改原有节点的 src；
• 在代码组织层面，必须建立明确的副作用清理接口，杜绝由于定时器残留、事件重复绑定和全局变量混乱导致的内存泄露与脏状态；
• 对于现代 ES Module 项目，可以直接借助带有防缓存参数的 动态 import()，利用其模块级沙箱机制实现更加优雅、解耦的热替换；
• 在工程落地中，应当始终封装包含超时控制、跨域支持与异常降级分支的健壮加载器，确保系统具备可观测性与容错弹性。