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

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