103 的定位
103 Early Hints 允许服务器在最终响应就绪前先下发 Link 头,提示浏览器提前 preconnect 或 preload 关键资源,把等待后端的时间用来建连、拉静态资源。规范见 RFC 8297,客户端可以完全忽略它而不会破坏兼容性。
基本信息
| 名称 | 103 Early Hints |
|---|---|
| 类型 | 1xx 中间响应 |
| 规范 | RFC 8297 |
| 典型头部 | Link: </static/app.css>; rel=preload; as=style |
| 生效前提 | 浏览器、CDN 或反向代理、源站三层都要支持并配置 |
典型使用场景
- 后端渲染慢的页面:先用 103 提示 preload 首屏 CSS/JS,缩短 LCP
- 提前 preconnect 到图片 CDN 或第三方域名,省掉握手时间
- 由 Nginx、CDN 在等待上游响应时自动补发,源站不必改造
- 静态站点托管与部分 PaaS 平台的自动优化项
响应示意
响应示意
HTTP/1.1 103 Early Hints
Link: </static/app.css>; rel=preload; as=style
Link: <https://cdn.example.com>; rel=preconnect
HTTP/1.1 200 OK
Content-Type: text/html
# 103 只是提示,浏览器最终以 200 响应的正文为准常用 Link 关系
| 取值 | 作用 | 注意点 |
|---|---|---|
| rel=preload | 提前拉取确定要用的资源 | as= 必须写对,否则优先级被降级 |
| rel=preconnect | 提前完成 DNS + TCP + TLS | 只对确实会跨域访问的目标有意义 |
| rel=modulepreload | 提前拉取 ESM 模块 | 仅对模块脚本生效 |
收益集中在「后端慢 + 静态资源多」的页面;链路任一层不支持时,103 会被忽略,属于无效开销。
收益从哪来
103 把「等待后端」的空转时间换成了并行工作:浏览器一收到提示就能开始域名解析、建连与拉取关键资源,等 200 到达时资源往往已在路上。收益大小取决于后端等待时长与资源的关键程度,后端只慢几十毫秒的页面几乎看不出差别。
不生效的常见情形
| 情形 | 表现 | 处理方向 |
|---|---|---|
| 反向代理未开启透传 | 全程只看到 200,抓包没有 103 | 核对代理版本与相关开关是否支持发送 103 |
| CDN 吞掉 1xx | 边缘节点直接返回渲染结果 | 查 CDN 文档确认是否透传 Early Hints |
| 浏览器版本较老 | 提示被静默忽略,无任何报错 | 属预期行为,不影响功能 |
| as= 等参数写错 | 资源没有被提前拉取 | 按开发者工具提示修正参数 |
验证方式最直观的是开发者工具的 Network 面板:支持 103 时,关键资源的发起时间会早于 HTML 响应到达的时间。