http/2 server push 已失效,主流浏览器(chrome 96+、firefox 97+、safari 15.4+)彻底移除 push_promise 支持,nginx 1.24.x/1.26.x 也不再包含 http2_push 指令;应改用标准 link: ; rel=preload; as=style 响应头实现兼容预加载。

HTTP/2 Server Push 已无法可靠推送 CSS —— 当前主流浏览器(Chrome 96+、Firefox 97+、Safari 15.4+)已彻底移除对 PUSH_PROMISE 帧的支持,Nginx 稳定版(1.24.x / 1.26.x)也不再包含 http2_push 指令。你配了也白配,浏览器直接丢弃。
为什么 Chrome DevTools 看不到 “Push” 请求?
不是配置漏了 listen http2,也不是路径写错,而是协议层已被废弃:
- chrome://net-internals/#http2 中可能残留 PUSH_PROMISE 日志,但对应 stream 状态恒为 Abandoned
- Network 面板的 Initiator 列只显示 preload 或 Other,绝不会出现 push
- Nginx error log 若报 push limit exceeded,仅代表服务端单向尝试失败,不代表客户端接收
怎样真正让关键 CSS 提前加载?
用标准、兼容、可控的 Link 响应头替代已失效的 Server Push:
- 后端(PHP/Node.js/Python)在返回 HTML 前输出:Link: /css/app.css>; rel=preload; as=style
- Nginx 默认透传该头,无需额外配置(确认未被 proxy_hide_header 屏蔽)
- 多资源用英文逗号分隔:Link: ; rel=preload; as=style, ; rel=preload; as=script
- 路径必须与 HTML 中 <link rel="stylesheet"> 的 href 完全一致(含大小写、斜杠)
宝塔面板里改 listen 443 ssl http2 还有必要吗?
有必要,但仅限于基础 HTTP/2 支持本身:
- http2 是多路复用、头部压缩等特性的前提,和 Push 无关
- 若没加,Link: rel=preload 仍能生效,但失去 HTTP/2 的底层性能红利
- 宝塔中修改配置文件后,务必检查是否同时满足:HTTPS 开启、SSL 证书有效、Nginx 版本 ≥ 1.10.2(HTTP/2 最低要求)
真正起作用的从来不是“服务器推”,而是“浏览器提前知道要什么”。把精力放在精准识别首屏 CSS、确保 as=style 正确声明、验证响应头是否送达,比折腾已淘汰的 http2_push 指令实在得多。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











