103 early hints 是服务器在200响应前通过http协议发送的状态码及link响应头，由后端（如nginx、cloudflare）在http/2+且https环境下主动触发，浏览器据此并行预加载关键资源，html仅被动受益，无法通过标签或配置生成该机制。
Early Hints 不是 HTML 能“配出来”的东西
它根本不在 HTML 层面生效，103 Early Hints 是服务器在发主响应（200 OK）前，用 HTTP 协议单独发出去的状态码 + Link 响应头。浏览器收到后才开始预加载——而此时你的 HTML 还没生成完、更没发到浏览器。你在 里写再多 <link rel="preload">，对 103 完全没影响，也不触发它。
常见错误现象：本地开发用 HTTP/1.1 测试、Nginx 没开 http_v2、early_hints on 写在 if 块里导致失效、Link 头路径不是绝对路径（如写成 css/app.css 而非 /css/app.css）。
真正起作用的只有三件事：
– 服务端支持且已启用 103（如 Cloudflare Enterprise、FrankenPHP、Nginx ≥1.21.4 + early_hints on）
– 客户端是 Chrome 103+ / Edge 103+（Firefox 110+ 支持但默认不启用，Safari 仍不支持）
– 请求走的是 HTTP/2 或 HTTP/3（HTTP/1.1 下多数服务端直接忽略或报错）
HTML 里该做什么：只管把关键资源“显式声明”出来
103 Early Hints 的 Link 头必须和主 HTML 中实际引用的资源严格一致，否则提示无效——浏览器收到 Link: ; rel=preload; as=style，但 HTML 里根本没 <link href="/style.css" rel="stylesheet">，那这个提示就白发了。
所以 HTML 的核心任务是：确保关键资源路径清晰、引用明确、as 类型匹配。例如：
<link rel="stylesheet" href="/css/critical.css"> @@##@@ <link rel="fontpreload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
注意：
– 所有路径必须是绝对路径（以 / 开头），和 Link 头中的一致
– 字体必须带 crossorigin，哪怕同源
– fetchpriority="high" 只对 Chromium 112+ 和 Safari 17.2+ 生效，不能替代 preload，但可补调度优先级
– 不要给已 preload 的资源再加 fetchpriority，后者会被忽略
Nginx 配置中 Link 头怎么写才有效
在 Nginx 里，add_header Link 不是随便写就能进 103 响应的。它必须满足三个硬性条件：
-
early_hints on;必须出现在server或location块顶层，不能套在if或proxy_pass后置逻辑里 -
listen 443 ssl http2;必须启用 HTTP/2（HTTP/3 也行，但需额外配置） -
add_header Link的值必须是完整、合法的 Link 字段，多个用英文逗号分隔，路径用绝对 URL 或绝对路径
正确示例：
location / {
early_hints on;
add_header Link "/critical.css>; rel=preload; as=style; nopush";
add_header Link "/inter.woff2>; rel=preload; as=font; crossorigin; nopush";
proxy_pass http://backend;
}
容易踩的坑：
– 忘了加 nopush：HTTP/2 Server Push 会和 preload 冲突，必须显式禁用
– add_header 写在 proxy_pass 之后：Nginx 不会把它提升到 103 阶段
– 使用相对路径或协议相对 URL（如 //cdn.example.com/style.css）：部分客户端解析失败
验证 Early Hints 是否真起了作用
别信配置文件写了就生效。真实链路中任何一个环节断掉，103 就不会出现：
Chrome DevTools → Network 面板 → 刷新页面 → 点击第一个 HTML 请求 → 查看 Headers 标签页：
– 如果看到 Status Code: 103 Early Hints，且下面有 Link: 字段，说明服务端发出了
– 再看后续资源请求（如 critical.css）的 Initiator 列是否为 EarlyHints（不是 parser 或 script）
– 在 Timing 标签页里，对比 DNS Lookup / Connect Start 时间：如果比其他资源早几百毫秒，说明预连接成功
关键提醒：
– 本地 localhost 下 HTTP/2 可能被降级，建议用真实 HTTPS 域名测试
– Cloudflare 用户需确认 Page Rule 中启用了 “Early Hints”，且账号是 Enterprise 计划
– Node.js 等自建服务若用 Express，默认不支持 103，需绕过框架直接操作 socket，风险高、兼容性差，不如换 FrankenPHP 或 RoadRunner
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
