http/2 server push 已被主流浏览器彻底移除，link: rel=preload 是客户端主动预加载而非服务器推送；early hints（103）是当前唯一支持提前加载资源的机制，需严格满足 header 顺序、nopush 标记及服务端支持等条件。
HTTP/2 Server Push 已彻底失效，Link Header 中的 rel="preload" 不是“推送”，而是客户端主动预加载——你配的不是推送，是 preload 提示。
为什么 Link: rel=preload; as=style 不等于 Server Push
浏览器收到 Link: ; rel=preload; as=style 时，只做一件事：在 HTML 解析过程中，提前发起一个 fetch() 级别的请求，不阻塞渲染，但仍是客户端拉取。真正的 Server Push 是服务器未经请求就把字节流塞进连接——这个通道在 Chrome 96+、Firefox 90+、Edge 100+ 中已被完全移除，PUSH_PROMISE 帧被静默丢弃，不进缓存、不触发解析、Network 面板里也看不到 Initiator: Push。
常见误判点包括：
- chrome://net-internals/#http2 显示 PUSH_PROMISE 日志 → 仅说明服务端发了帧，不代表客户端消费
- Wireshark 抓到 PUSH_PROMISE → TCP 层可见，但 HTTP/2 解帧后直接跳过
- Lighthouse 建议“启用 Server Push” → 规则库未更新，截至 2026 年 9 月仍沿用过时建议
Nginx 配置 Link Header 的实操要点
必须用 add_header Link 指令，且仅对 HTML 响应生效（不能放 server 全局块）：
- 路径必须是绝对 URI，以
/开头，如/static/css/app.css；相对路径（./app.css）会被忽略 -
as属性必须准确：CSS 用as=style，JS 用as=script，字体用as=font，缺一不可 - 不要加
crossorigin或integrity等属性，除非真需要跨域或 SRI 校验（会干扰 preload 行为） - 若使用宝塔面板：进入【网站】→【设置】→【配置文件】，在
location / { }内插入指令，保存后点【重载配置】
示例配置：
location / {
add_header Link '/css/main.css>; rel=preload; as=style', '/js/runtime.js>; rel=preload; as=script';
}
PHP 中发送 Early Hints 的关键细节
Early Hints（HTTP 103）是目前唯一能让浏览器在后端处理 HTML 前就开始加载 CSS 的机制，但需满足三个硬性条件：
- 必须在任何输出之前调用
header()，且replace参数设为false（允许多个Link头） - 必须显式添加
nopush，即写成rel=preload; as=style; nopush—— 没有它，某些中间件（如旧版 Nginx）可能误转为已废弃的 PUSH_PROMISE - 服务器和 CDN 必须支持 103（如 Cloudflare、FrankenPHP、Caddy 2.8+），纯 Apache/Nginx 默认不支持
典型 PHP 片段：
<?php header("HTTP/1.1 103 Early Hints");
header('Link: </css/critical.css>; rel=preload; as=style; nopush', false);
header('Link: <https:>; rel=preconnect; nopush', false);
// 此时浏览器已开始下载 critical.css
sleep(1); // 模拟数据库查询、模板渲染等耗时操作
header("HTTP/1.1 200 OK");
header("Content-Type: text/html; charset=utf-8");
?></https:>
最容易被忽略的兼容性陷阱
即使你正确写了 Link 头，以下情况仍会导致 preload 失效：
- CSS 文件本身带
Cache-Control: immutable或强缓存头 → 浏览器可能跳过 preload，认为“已有最新版本” - href 路径指向 404 或返回非
text/cssMIME 类型 → Network 面板显示 200 但 Preview 为空，说明服务端没返回正确 Content-Type - 用了
@import引入其他 CSS → 它强制串行加载，会阻塞 preload 下载完成后的应用时机 - 把
rel="preload"当作rel="stylesheet"用 → 必须保留真实<link rel="stylesheet">标签，否则样式不会实际应用
真正影响首屏速度的，从来不是“推多少”，而是“哪些该内联、哪些该 preload、哪些该延迟”。现在花时间验证 Link 头是否出现在 HTML 响应的 Headers 里，并确认 CSS 请求的 Initiator 是 preload 而非 Parser，比调参 http2_push 实在得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
