如何执行已通过prefetch预取的JavaScript文件？

首先得明确：rel="prefetch"的作用只是提前将资源下载到浏览器缓存，它并不会自动解析或执行脚本——这就是你看到文件已获取，但alert没弹出来的核心原因。要执行预取好的JS，你需要手动触发脚本的加载执行逻辑，以下是两种常用方法：

方法1：动态创建<script>标签 #

这是最稳妥也最符合浏览器规范的方式，浏览器会直接从缓存读取预取好的文件，不会发起新请求：

// 创建script元素
const alertScript = document.createElement('script');
alertScript.src = 'alert.js';
// 将script插入到DOM中，触发执行
document.body.appendChild(alertScript);

你可以把这段代码绑定到某个用户操作（比如按钮点击），或者在页面合适的时机（比如DOM加载完成后）执行，这样既利用了预取的缓存优势，又能控制脚本执行时机。

方法2：通过Fetch读取缓存内容并执行 #

如果你的场景更灵活，也可以用fetch读取缓存中的脚本内容，再通过eval执行（注意：仅当你完全信任该脚本内容时才用这种方式，避免XSS风险）：

fetch('alert.js')
  .then(res => res.text())
  .then(scriptCode => {
    eval(scriptCode);
  });

额外补充：你之前用<script src="alert.js">能直接执行，是因为这个标签同时完成了下载（如果没缓存）+ 解析执行两个步骤，而prefetch只做了第一步。

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