现代浏览器已完全弃用HTTP/2 Server Push,Chrome 96+、Firefox 90+、Edge 96+均静默忽略;真实加载仍需HTML解析后发起独立GET请求,未节省RTT;应改用rel="preload"实现提前加载。

根本做不到——现代浏览器已完全弃用 HTTP/2 Server Push,Link 头或 http2_push 指令在 Chrome 96+、Firefox 90+、Edge 96+ 中被静默忽略,HTML 响应前“推送”CSS/JS 是无效操作。
为什么你看到的“推送成功”都是假象
Chrome 的 chrome://net-internals/#http2 仍会显示 PUSH_PROMISE 日志,Wireshark 也能抓到帧,但这只是服务器单方面发送,客户端早已丢弃。真实加载链路仍是:
- 浏览器请求
index.html - 收到 HTML 后解析出
<link rel="stylesheet" href="/main.css"> - 再发起独立 GET 请求获取 CSS
中间没有节省任何 RTT,也没有资源提前进入缓存。
替代方案:用 rel="preload" 替代 Server Push
这是目前唯一被所有主流浏览器支持、且语义明确的“提前加载”机制。它不依赖服务器推送,由浏览器自主调度,兼容性好、可缓存、可中断:
立即学习“前端免费学习笔记(深入)”;
-
<link rel="preload" as="style" href="/main.css">—— 提前拉取 CSS,但不执行 -
<link rel="preload" as="script" href="/app.js">—— 提前拉取 JS,后续<script></script>可复用 - 必须放在
中,且不能加onload或crossorigin等干扰属性(除非真需要) - 避免对非首屏资源使用,否则会抢占带宽、拖慢关键内容
服务端配置 http2_push 或 Link 头的后果
如果你在 Nginx 配了 http2_push /main.css;,或 PHP 输出了 Link: ; rel=preload; as=style,会发生:
- Nginx 仍会发 PUSH_PROMISE 帧(浪费约 100–200 字节 TCP 开销)
- 浏览器收到后不做任何事,既不缓存也不触发解析
- 开发者工具 Network 面板里看不到该资源的
Initiator: Push - Lighthouse 等工具若还提示“启用 Server Push”,说明其规则库已过时(截至 2026 年 5 月仍未更新)
真正有效的首屏优化组合
不要把时间花在调试已失效的推送机制上。优先落实这些:
- 内联首屏关键 CSS(
<style>...</style>),确保 FCP 不阻塞 - 对非关键 JS 使用
defer或type="module",避免阻塞解析 - 用
rel="preload"加载字体、首屏图片等高价值静态资源 - 确认 TLS 握手优化(如 OCSP stapling、TLS 1.3)、HTTP/2 连接复用、Brotli 压缩已启用
Server Push 不是“没配对”,而是协议层已移除支持——这不是配置问题,是时代结束了。



















