页面按Ctrl+F5加载时DOMContentLoaded事件触发两次该如何解决？

解决思路 #

• 首先排查脚本重复加载问题：打开浏览器开发者工具的「网络」面板，过滤JS资源，按Ctrl+F5刷新后查看对应脚本是否被请求了两次。也可以在脚本第一行添加console.log('脚本加载')，观察控制台输出次数，若输出多次则证明页面内存在多处对该脚本的引用，或存在路由跳转、动态插入脚本等逻辑导致脚本重复加载，修复重复引用问题即可解决。
• 排查浏览器扩展影响：除AVG外，广告拦截、密码管理、前端调试类扩展都可能向页面注入脚本、触发重复DOM事件。可使用浏览器无痕模式（默认禁用所有扩展）打开页面测试，若问题消失则逐个禁用扩展定位冲突项即可。
• 排查iframe关联影响：若当前页面被嵌套在其他iframe内，或页面自身包含同域iframe，可能导致事件跨上下文触发。可在事件回调中添加console.log(e.target)，查看两次触发的事件目标是否为同一个document，若不一致则排查iframe相关逻辑。
• 兜底解决方案：若暂时无法定位根因，可添加标志位保证逻辑仅执行一次，代码示例如下：

// 全局标志位，防止重复执行
let isDOMLoaded = false;
document.addEventListener('DOMContentLoaded', function () {
    if (isDOMLoaded) return;
    isDOMLoaded = true;
    // 原有业务代码
    var b = 1;
});

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