HTTP 103 Early Hints：预加载提示与首包优化

概述

Early Hints（HTTP 103）允许服务器在主响应准备过程中提前发送 Link 头中的关键资源预加载提示（如样式与 LCP 图片）。浏览器可并行获取资源，从而缩短关键路径。

用法/示例

响应头示例

HTTP/1.1 103 Early Hints
Link: ; rel=preload; as=style
Link: ; rel=preload; as=image; imagesrcset="/[email protected] 2x"

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8

Node.js（示意）

res.writeHead(103, {
  Link: '; rel=preload; as=style, ; rel=preload; as=image'
})
// 继续生成主响应...
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' })
res.end('...')

工程建议

• 仅为关键路径资源发送 Early Hints，避免过度预取造成拥塞。
• 与 preload、fetchpriority 协同，确保 LCP 候选资源提前获取。
• 使用 DevTools 网络面板观察 Early Hints 事件与资源并发情况，结合真实网络环境测量收益。

参考与验证

• RFC 8297：Early Hints — https://datatracker.ietf.org/doc/html/rfc8297
• web.dev：Early Hints — https://web.dev/articles/early-hints
• Chrome Docs：Early Hints — https://developer.chrome.com/docs/web-platform/early-hints/