early hints（http 103）是http/2或http/3协议特性，非html5功能；需后端在主响应前发送link头触发浏览器预加载关键资源，如css、字体等，以利用服务器处理间隙提升性能。
Early Hints（HTTP 103 状态码）不是 HTML5 的特性，而是 HTTP/2 和 HTTP/3 协议层面的服务器功能。它不由 HTML 标签控制，也不在前端写 <link> 实现，而是在 PHP、Node.js 或 Nginx 等后端环境，在主 HTML 响应发出前，主动发送一个 103 Early Hints 响应，其中通过 Link 响应头告诉浏览器：「这些关键资源你先去加载」——比如 CSS 文件。
所以，“在后台处理业务时先让浏览器加载 CSS”，核心是：利用服务器“思考时间”（server think-time），在生成最终 HTML 前就发 103 提示，触发浏览器并行预加载。
✅ 正确做法：PHP 中发送 Early Hints Link 头
必须满足三个前提：
- 服务支持 HTTP/2 或 HTTP/3（HTTP/1.1 不支持 103）
- Web 服务器（如 Nginx ≥1.21.4、Apache ≥2.4.52、Caddy、Cloudflare 等）已启用 Early Hints 支持
- PHP 运行在
mod_php、PHP-FPM + FastCGI 或 SAPI 兼容模式下，且未提前输出任何内容
示例：在 PHP 脚本开头发送 CSS 预加载提示
<?php // 确保没有任何空格、BOM、echo、print 在此之前
header("HTTP/1.1 103 Early Hints");
header('Link: <https://example.com/critical.css>; rel=preload; as=style; nopush', false);
// 可继续添加其他提示（字体、JS、CDN 域名预连）
header('Link: <https:>; rel=preconnect; nopush', false);
header('Link: <https:>; rel=preload; as=font; type="font/woff2"; nopush', false);
// 此时浏览器已开始下载 critical.css —— 而你的 PHP 还在查数据库、渲染模板...
sleep(1); // 模拟后端耗时操作（真实场景可能是 PDO 查询、模板引擎渲染等）
// 发送正式响应（200 OK + HTML）
header("HTTP/1.1 200 OK");
header("Content-Type: text/html; charset=utf-8");
?>
<!-- 注意：这里仍需保留真实的 <link rel="stylesheet">，否则样式不会应用 -->
<link rel="stylesheet" href="https://example.com/critical.css">
<!-- 其他 head 内容 -->...
</https:></https:>
⚠️ 关键细节：
nopush必须带上：防止被误当作 HTTP/2 Server Push（现代 CDN 如 Cloudflare 默认禁用 Push，但加nopush是明确语义）as=style必须指定：否则浏览器可能忽略或降级为低优先级 fetchLink头必须在200 OK主响应之前发送，且不能有任何echo/var_dump/空白符干扰输出缓冲
❌ 常见误解与错误
误以为
<link rel="preload">在 HTML 里就算 Early Hints
→ 不是。那是「HTML 解析到才触发」，比 Early Hints 晚几百毫秒；103 是在 HTML 字节还没发出去时就启动加载。在 PHP 里用
echo "<link rel="preload">"或输出 HTML 后再发 header
→ 失败。HTTP 头必须在响应体之前发送，且 103 是独立响应阶段。漏掉
as=或写错类型（如as="css"）
→ 浏览器不识别，as="style"才对应 CSS，as="script"对应 JS，as="font"对应字体。对已启用 Brotli/Gzip 的站点忽略压缩影响
→ Early Hints 不压缩，但预加载的 CSS 若本身未压缩，会拖慢效果；确保critical.css已 Gzip/Brotli 编码。
? 浏览器与服务端支持现状（截至 2026 年中）
| 项目 | 支持情况 |
|---|---|
| Chrome / Edge | ✅ 自 Chrome 103+ 全面支持（含 preload + preconnect） |
| Safari | ✅ Safari 16.4+ 开始支持，17.2+ 更稳定 |
| Firefox | ⚠️ 实验性支持（需 network.http.http3.enable_early_hints = true 手动开启） |
| Nginx | ✅ ≥1.21.4，需配置 underscores_in_headers on; + add_header Link ... always; 配合 http_v2
|
| Cloudflare | ✅ 自动为支持客户端开启，无需额外配置（只要源站返回 103） |
| PHP | ✅ 原生 header() 支持，但需确保 SAPI 层允许发送 103（部分共享主机屏蔽） |
? 验证是否生效
- 打开 Chrome DevTools → Network 标签页
- 刷新页面，找到第一个请求（通常是
document类型） - 查看 Headers → Response Headers，确认存在：
HTTP/2 103 Link: <https:>; rel=preload; as=style; nopush</https:>
- 在 Timing 或 Waterfall 中，观察
critical.css的Start Time是否早于 HTML 的Content Download阶段 —— 若早 200ms+，说明成功利用了 server think-time。
不需要改 HTML 结构，也不依赖前端框架。真正起效的关键，是后端在「等数据库、调 API、渲染模板」这段时间，把网络空闲期交给浏览器去抢跑加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
