HTTP 103 Early Hints 链路提速：预热关键资源与风险治理实践

# 背景与价值 - Early Hints 允许服务器在生成主响应前先下发 `Link` 线索，浏览器据此预加载关键资源。 - 常用于首页 LCP 图片、关键样式/字体与路由脚本，降低首屏等待。 # 服务端与 CDN 配置 - 反向代理/CDN（如 Cloudflare、Fastly、NGINX + 103）可在缓存命中或上游处理前发送 Early Hints。 - Node（新版本）支持 `res.writeEarlyHints()`；若不可用则由边缘层发送。 Node/Express 示例（能力存在时）： ```ts app.get('/', async (req, res) => { if (typeof (res as any).writeEarlyHints === 'function') { (res as any).writeEarlyHints({ Link: [ '; rel=preload; as=style; fetchpriority=high', '; rel=preload; as=image; imagesrcset="/hero.jpg 1x, /[email protected] 2x"; fetchpriority=high', '; rel=modulepreload; fetchpriority=high' ] }); } // 后续正常生成主响应 res.sendFile('public/index.html'); }); ``` NGINX 示例（概念）： ```nginx location = / { add_header Link "; rel=preload; as=style" always; add_header Link "; rel=modulepreload" always; add_header Link "; rel=preload; as=image" always; return 103; # Early Hints } ``` # 浏览器端配合 - 在 HTML 中保持与 Early Hints 一致的资源引用，避免孤立预加载。 ```html ``` # 指标验证（Chrome 128/Edge 130 + 支持的 CDN） - LCP（P95）：首页降低 100–260ms（资源与网络依场景）。 - 关键资源发起时间：较无 Early Hints 提前 ≥ 80–150ms。 - 稳定性：INP 不劣化；带宽争用控制在可接受范围。 # 风险与治理 - 资源一致性：Early Hints 的 `Link` 与主响应需一致，避免无用预加载。 - CDN/代理支持差异：先在单路经试点；失败回退到常规 `preload` 与 `fetchpriority`。 - 缓存与 `Vary`：若按设备特征返回不同资源（Client Hints），确保缓存键正确。 # 回退策略 - 无 103 支持：使用 `` 与 `fetchpriority`；在服务器端启用 HTTP Priority。 # 测试清单 - 网络追踪：Early Hints 帧出现且关键资源在主响应前发起。 - 弱网与丢包：预加载仍能提升首屏关键资源到达时间。 - 一致性：资源引用与尺寸/变体匹配，避免浪费带宽。 # 应用场景 - 首页主视觉与关键样式、首屏模块脚本、字体与图标资源的预热。