Chrome为何不按资源优先级顺序下载？实际案例求助

问题代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="prefetch" as="image" href="./assets/footer.jpg" />
    <script
      async
      type="text/javascript"
      src="https://code.jquery.com/jquery-3.3.1.js"
    ></script>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <script src="./utils.js"></script>
  </body>
</html>

问题详情 #

根据文档说明，async 脚本的下载优先级为Low，CSS为Highest，但在Chrome 107.0.5304.107中按下Ctrl+F5强制刷新时，jquery-3.3.1.js 却先于style.css完成下载。footer.jpg因prefetch标记优先级为Lowest，确实在最后下载，不符合预期的下载顺序：

• localhost（Highest）
• style.css（Highest）
• utils.js（High）
• jquery-3.3.1.js（Low）
• footer.jpg（Lowest）

原因解析 #

1. 请求发起时机优先于理论优先级
   浏览器解析HTML是从上到下顺序执行的，async脚本在style.css之前被解析到，因此浏览器会先发起该脚本的请求。即使CSS的理论优先级更高，但请求发起时间更早，若网络条件允许，就可能先完成下载。

2. 跨域资源的网络调度差异
   jquery-3.3.1.js是跨域CDN资源，浏览器会为跨域请求分配独立的连接池，不受同域请求的连接数限制。而同域的style.css受限于同域连接数上限（Chrome默认6个），可能需要等待空闲连接，导致下载完成时间滞后。

3. 强制刷新的策略调整
   Ctrl+F5强制刷新会忽略本地缓存，同时浏览器会调整请求调度逻辑，优先发起所有已解析到的资源请求，而非严格按照优先级排队。这种情况下，先发起的跨域脚本请求若遇到响应更快的CDN节点，就会先完成下载。

4. 优先级是调度优先级，非绝对下载顺序
   文档中给出的优先级是浏览器的资源调度优先级（如带宽分配、请求队列排序），但实际下载完成时间还受文件大小、服务器响应速度、网络延迟等因素影响。若jquery-3.3.1.js文件更小、CDN响应更快，即使优先级更低，也会先于更大或响应更慢的CSS文件完成下载。

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