遇到这种多版本JS缓存导致重复事件监听、频繁请求的问题，我通常会用下面这些接地气的方法排查，亲测有效：

1. 浏览器开发者工具的Sources面板追踪 #

• 打开Chrome DevTools的Sources标签，查看左侧的JS文件列表。重点找文件名相同但版本哈希不同的文件（比如app.js?v=abc123和app.js?v=def456），或者同一路径下被重复加载的文件——这些大概率就是新旧版本的缓存文件。
• 在你的事件监听代码（比如addEventListener调用处）加断点，每次事件触发时，查看调用栈里的文件路径和版本信息。如果不同触发的调用栈来自不同的JS文件，那基本实锤多份缓存在运行。
• 嫌断点麻烦的话，直接在事件处理函数里加一行console.trace('事件触发来源')，每次事件触发时控制台会打印完整调用栈，一眼就能看到是哪个JS文件在执行。

2. 给JS文件加全局唯一标识 #

• 在你的JS代码开头加一个全局版本标识：

  // 每次发布新版本就更新这个值
  window.__MY_APP_VERSION__ = "v20240520_build01";
  // 或者加实例计数器
  window.__JS_INSTANCE_COUNT__ = (window.__JS_INSTANCE_COUNT__ || 0) + 1;
  

• 然后在浏览器控制台执行console.log(window.__MY_APP_VERSION__)，如果输出多个不同的版本号，或者window.__JS_INSTANCE_COUNT__的值大于1，说明页面里同时运行了多份JS文件。

3. 检查DOM元素的事件监听器 #

• 打开DevTools的Elements面板，选中你怀疑被重复监听的DOM元素，切换到右侧的Event Listeners标签。展开对应的事件（比如click、scroll），查看每个handler的来源文件。如果同一个事件有多个handler来自不同版本的JS，就是多份缓存搞的鬼。
• 也可以直接在控制台执行代码获取监听器：

  // 替换成你的目标元素选择器
  const targetEl = document.querySelector('#submitBtn');
  console.log(getEventListeners(targetEl));
  

  从返回的结果里能清楚看到每个事件的所有handler及其所属文件。

4. 网络请求与缓存验证 #

• 打开DevTools的Network面板，过滤JS类型的请求，检查是否有同一逻辑的JS文件被重复加载（比如不带版本号的app.js被多次请求，或者不同版本号的同文件）。注意：如果文件是从缓存读取的，可能不会出现在Network列表里，所以要结合Sources面板一起看。
• 勾选Network面板的Disable cache选项，刷新页面对比加载情况。如果禁用缓存后频繁请求的问题消失，说明旧缓存的JS文件在作祟。

额外小建议 #

一旦确认是多份缓存的问题，后续可以通过给静态资源加内容哈希版本号（比如app.js?v=${contentHash}）、配置HTTP缓存策略（比如设置Cache-Control: no-cache或合理的过期时间）、用Service Worker主动清理旧缓存等方式，避免类似问题再次发生。

内容的提问来源于stack exchange，提问作者David Milanese