Chrome执行window.location重定向后仍加载后续资源的原因与解决办法

先看你提供的代码：

<html> 
  <head> 
    <script type="text/javascript"> 
      window.location = '/another-url'; 
    </script> 
    <link href="styles.css" rel="stylesheet" /> 
  </head> 
  <body> 
    <img src="image.png"> 
  </body> 
</html>

你发现Chrome会发送styles.css和image.png的请求，哪怕它们在重定向脚本之后，但Safari却不会——这其实是两款浏览器的预加载机制差异造成的。

为什么Chrome会这么做？ #

Chrome有个叫**预加载扫描器（Preload Scanner）**的“幕后选手”，它会在浏览器解析HTML的同时，单独开一个线程提前扫描页面里的资源引用（比如样式、图片、脚本），不等当前脚本执行完就发起请求，目的是加快页面加载速度。

你的重定向脚本虽然写在<link>和<img>前面，但预加载扫描器根本不等这个脚本执行，扫到后面的资源标签就直接发请求了。等脚本执行触发重定向时，这些请求可能已经发出去了，自然就成了无效请求。

而Safari的预加载策略要保守得多，它会等前面的脚本执行完，再继续解析后续的资源标签，所以不会出现这种情况。

怎么避免这些无效请求？ #

这里有几个实用的方案，你可以根据需求选择：

1. 用meta重定向替代脚本 #

把脚本换成<meta>重定向标签，浏览器会优先处理这个指令，预加载扫描器也能识别到，不会去加载后续资源：

<html> 
  <head> 
    <meta http-equiv="refresh" content="0; url=/another-url">
    <link href="styles.css" rel="stylesheet" /> 
  </head> 
  <body> 
    <img src="image.png"> 
  </body> 
</html>

content="0"表示立即重定向，你也可以改成其他秒数。

2. 在脚本里停止页面加载 #

在重定向后加上window.stop()，强制浏览器停止后续的资源加载和页面解析：

<html> 
  <head> 
    <script type="text/javascript"> 
      window.location = '/another-url';
      window.stop(); // 终止页面后续加载
    </script> 
    <link href="styles.css" rel="stylesheet" /> 
  </head> 
  <body> 
    <img src="image.png"> 
  </body> 
</html>

注意：部分浏览器里window.stop()可能会影响重定向的执行，建议先测试一下。

3. 动态添加资源标签 #

如果必须保留脚本重定向，那不要直接在HTML里写<link>和<img>，而是在确认不需要重定向时，用JS动态创建这些元素：

<html> 
  <head> 
    <script type="text/javascript"> 
      // 假设这里有判断逻辑，不需要重定向时才加载资源
      const shouldRedirect = false;
      if (shouldRedirect) {
        window.location = '/another-url';
      } else {
        // 动态创建样式标签
        const link = document.createElement('link');
        link.href = 'styles.css';
        link.rel = 'stylesheet';
        document.head.appendChild(link);
        
        // 动态创建图片标签
        const img = document.createElement('img');
        img.src = 'image.png';
        document.body.appendChild(img);
      }
    </script> 
  </head> 
  <body> 
  </body> 
</html>

这样预加载扫描器找不到静态的资源引用，自然不会提前发请求。

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