prerender预加载页面时为什么会触发两次DOMContentLoaded事件？

Mc.雨晨提问于 2026-02-10 16:59:28 阅读 29

优化

我在导航页给某个链接加了prerender预加载，结果发现目标页面的DOMContentLoaded事件触发了两次。明明代码看起来没问题，这是什么情况？

示例代码是这样的：


<link rel="prerender" href="/about.html" rel="external nofollow"  rel="external nofollow" >
<a href="/about.html" rel="external nofollow"  rel="external nofollow" >跳转到关于页</a>

目标页面about.html里用console.log测试过，当先点击导航再跳转时，控制台会显示两次”DOMContentLoaded”日志。如果直接访问about页面则正常只触发一次。查过MDN文档没找到相关说明，是不是预加载时会先完整加载页面导致重复触发？

尝试过把prerender换成prefetch，问题消失，但需要保持prerender的完整渲染特性，应该怎么解决重复触发的问题？

我来解答赞 9 收藏

反馈

2 条解答

博主利云 Lv1

你遇到的这个现象其实不是 bug，而是 prerender 的设计行为——它会完整下载并渲染目标页面到一个隐藏的 DOM 树里，等你点击链接跳转时，浏览器会把这个已经渲染好的页面直接「切」进当前视图，但不会销毁那个隐藏 DOM 树，而是把它缓存起来备后续复用。

关键点来了：当 prerender 触发时，about.html 会被当作一个独立文档完整加载，所以会走完完整的生命周期，DOMContentLoaded 正常触发一次；等你点击链接真正跳转时，浏览器会复用 prerender 的结果，但这个「复用」本质上还是重新进入了一次文档加载流程（虽然内容是缓存的），DOMContentLoaded 就又触发了一次。

这不是你代码的问题，是浏览器内部机制导致的。
真要解决的话，最简单高效的做法是加个标志位防重入，比如：

<script>

if (!window.__DOMContentLoaded_Fired__) {

  window.__DOMContentLoaded_Fired__ = true;

  document.addEventListener('DOMContentLoaded', function() {

    console.log('DOMContentLoaded');

    // 你的初始化逻辑放这里

  });

}

</script>

或者更干脆点，在入口处加个 sessionStorage 判断，避免重复执行：

<script>

if (!sessionStorage.getItem('DOMContentLoaded_done')) {

  sessionStorage.setItem('DOMContentLoaded_done', 'true');

  document.addEventListener('DOMContentLoaded', function() {

    console.log('DOMContentLoaded');

    // 初始化逻辑

  });

}

</script>

如果页面逻辑特别重，你还可以考虑用 + 手动 fetch + 浏览器缓存来模拟 prerender 的效果，不过那样就得自己管 DOM 渲染和资源预载了，成本更高。

说白了，prerender 就是「提前完整跑一遍页面生命周期」，所以重复触发是必然的，不是你漏了什么细节。

2026-02-26 10:12

UP主～圆圆 Lv1

这问题我之前踩过坑，不是你的代码写得不对，而是 prerender 的机制导致的。prerender 会真的把整个页面在后台完整跑一遍，包括 DOM 解析、资源加载、脚本执行，所以 about.html 被预加载时就会触发一次 DOMContentLoaded。等你真正点击跳转过去的时候，浏览器发现这个页面已经 prerender 过了，就直接激活它，这时候页面又走了一遍生命周期，于是事件再触发一次。

换成 prefetch 就不会，因为 prefetch 只是下载 HTML 内容，不执行渲染流程，所以没这个问题。

标准写法是加个判断，确保 DOMContentLoaded 的逻辑只执行一次。可以用一个全局标记：

if (!window.domContentLoadedFired) {

  window.domContentLoadedFired = true;

  document.addEventListener('DOMContentLoaded', function() {

    console.log('DOMContentLoaded');

    // 你的初始化逻辑

  });

}

这样即使页面被 prerender 加载一次、再被激活一次，核心逻辑也只会运行一回。

另外，如果你用了框架（比如 React 或 Vue），它们内部一般已经处理了这类重复执行的问题，但纯原生 JS 就得自己防重。建议所有依赖 DOM 的初始化都包一层 guard 条件。

2026-02-10 17:00