HTTP/2协议实现：Link头推送资源重复请求问题求助

这种重复请求的情况确实挺闹心的，我之前帮别人排查过类似的问题，咱们从几个常见的方向一步步来定位：

1. 推送URL与页面引用URL不匹配 #

浏览器对HTTP/2推送的资源匹配逻辑非常严格，哪怕是一点点差异都会导致它认为是不同的资源，进而重新请求。比如：

• 你推送的是</assets/style.min.css>，但页面里引用的是带版本参数的/assets/style.min.css?v=202405
• 推送的是绝对路径，页面里用了相对路径assets/style.min.css
• 协议差异（比如推送用HTTP，页面是HTTPS，不过现在一般都是HTTPS了）

解决办法：打开浏览器Elements面板，找到页面里引用CSS/JS的标签，复制完整的资源URL（包括所有查询参数），然后和Link响应头里的推送URL做对比，确保完全一致。

2. 缓存策略配置不合理 #

如果推送的资源没有设置有效的缓存头，浏览器不会缓存推送过来的资源，等到页面需要的时候就会重新发起请求。

• 检查推送资源的响应头，确认有没有设置Cache-Control，比如Cache-Control: public, max-age=31536000这类长期缓存的配置
• 避免设置no-cache、must-revalidate这类会强制浏览器重新验证的缓存策略，除非你确实需要实时更新资源

3. Link响应头格式错误 #

你提到的Link头示例是header("Link: </assets/style.min.css>; rel=p..."，这里很可能是没写完整的属性。HTTP/2推送的Link头必须包含：

• rel=preload：明确告诉浏览器这是预加载推送的资源
• as属性：指定资源类型，比如CSS用as=style，JS用as=script，字体用as=font
• 字体资源还需要额外加crossorigin属性（哪怕是同域字体）

正确的示例应该是这样的：

header("Link: </assets/style.min.css>; rel=preload; as=style, </assets/main.min.js>; rel=preload; as=script, </assets/fonts/roboto.woff2>; rel=preload; as=font; type=font/woff2; crossorigin");

如果缺少这些属性，浏览器无法正确识别和复用推送的资源，自然会重新请求。

4. 服务器或CDN的HTTP/2配置问题 #

首先确认你的服务器确实开启了HTTP/2支持：

• Nginx需要在listen指令里加上http2，比如listen 443 ssl http2;
• Apache需要启用mod_http2模块，并且在配置里开启HTTP/2

另外，如果你的站点用了CDN，要确认CDN支持HTTP/2推送，并且没有过滤或修改Link响应头——有些CDN会默认去掉这类头，导致推送失效。

最后一步：对比正常站点的差异 #

如果上面的排查都没问题，建议把当前站点和那个正常工作的站点的Network请求做对比：

• 看两者的Link响应头格式是否一致
• 看推送资源的缓存头配置差异
• 看两次请求的资源URL、请求头是否有不同

这样能快速定位到具体的配置差异点。

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