如何在页面加载初期发起多个HTTP请求并优化请求时机？

嘿，看来你在优化页面资源加载效率上花了不少心思，针对你提到的两个问题——页面加载初期发起多HTTP请求，以及优化Google Font和jQuery的加载时机，我整理了一些实用的方案，都是实际项目里验证过的：

这些方法能帮你让浏览器更早地并行发起资源请求，提升整体加载速度：

• 用<link rel="preload">预加载关键资源：这是浏览器原生支持的优先级最高的资源预加载方式，能明确告诉浏览器“这个资源很重要，尽早请求”。不管资源会不会马上被用到，浏览器都会在页面加载初期就发起请求。语法示例：

  <link rel="preload" href="/path/to/your-resource.js" as="script">
  <link rel="preload" href="/path/to/your-font.woff2" as="font" crossorigin>
  

  注意as属性必须匹配资源类型（script、font、style、image等），跨域资源还要加上crossorigin属性，否则预加载可能失效。

• 利用async/defer加载脚本：把需要加载的外部脚本放在<head>里，加上async或defer属性，这样浏览器在解析HTML的同时就会并行下载脚本，不会阻塞页面渲染。async是脚本下载完成后立即执行（顺序不确定），defer是等HTML解析完成后按顺序执行，适合有依赖关系的脚本。示例：

  <head>
    <script src="/path/to/script1.js" defer></script>
    <script src="/path/to/script2.js" defer></script>
  </head>
  

• 升级到HTTP/2或HTTP/3：这两个协议彻底解决了HTTP/1.1的“队头阻塞”问题，同一个TCP连接里可以同时发送多个请求，不需要建立多个连接，天生就能提升多请求并发的效率。这是基础架构层面的优化，效果非常明显。

• 小体积资源内联：如果是体积很小的脚本、CSS或者字体，可以直接内联到HTML文件里，减少HTTP请求数。比如把几百字节的工具脚本直接写在<script>标签里，避免额外的请求开销，但要注意不要过度内联，否则会增大HTML体积，反而影响首屏加载。

1. 解决Google Font请求启动过晚的问题 #

• 提前预加载字体CSS文件：用<link rel="preload">提前发起字体CSS的请求，这样浏览器会更早拿到字体定义，进而提前加载字体文件。示例：

  <link rel="preload" href="/path/to/your-google-font.css" as="style">
  <link rel="stylesheet" href="/path/to/your-google-font.css">
  

  如果是使用第三方CDN的字体，记得加上crossorigin属性。

• 添加font-display: swap属性：在字体定义里加上这个属性，让浏览器在字体加载完成前先用系统默认字体显示文本，不会阻塞文本渲染。同时，这也不会降低字体资源的请求优先级，只是提升了用户体验。示例：

  font-family: 'YourGoogleFont';
  font-display: swap;
  

• 将字体文件部署到自有域名：如果条件允许，把Google Font的字体文件下载下来，放到自己的域名或CDN上，避免跨域请求的额外开销（比如DNS解析、TCP握手），同时配合预加载能进一步提前请求时机。

2. 让jQuery请求时机与同域名script.min.js一致 #

• 将两个脚本标签放在同一位置，使用相同的加载属性：如果script.min.js是放在<head>里用defer加载，那把jQuery的标签也放在旁边，同样加上defer，这样浏览器会同时发起两个脚本的请求，时机完全同步。示例：

  <head>
    <script src="/path/to/jquery.js" defer></script>
    <script src="/path/to/script.min.js" defer></script>
  </head>
  

  因为defer会保证脚本按顺序执行，所以不用担心依赖问题。

• 合并两个脚本文件：如果jQuery和script.min.js都是同域名的，可以把它们合并成一个文件，这样只需要一个HTTP请求，既提升了加载效率，又天然保证了加载时机一致。不过要注意合并后的文件体积，以及后续维护的便利性。

• 用预加载提前发起jQuery请求：如果因为某些原因不能调整脚本标签的位置，在<head>最前面加上预加载标签，让浏览器提前发起jQuery的请求，和script.min.js的请求时机对齐。示例：

  <link rel="preload" href="/path/to/jquery.js" as="script">
  

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