103 Early Hints
HTTP 103 Early Hints 信息性响应可能由服务器在仍在准备响应时发送，其中包含服务器预期最终响应将链接到的站点和资源的提示。这允许浏览器在服务器准备并发送最终响应之前，预连接到站点或开始预加载资源。由早期提示指示的预加载资源在客户端收到提示后立即被获取。
早期提示响应主要用于 Link 标头，该标头指示要加载的资源。它还可以包含一个 Content-Security-Policy 标头，该标头在处理早期提示时强制执行。
服务器可能会发送多个 103 响应，例如，在重定向之后。浏览器仅处理第一个早期提示响应，如果请求导致跨域重定向，则必须丢弃此响应。
注意：出于兼容性和安全原因，建议仅通过 HTTP/2 或更高版本发送 HTTP 103 Early Hints 响应，除非已知客户端能够正确处理信息性响应。
大多数浏览器为此原因将支持限制在 HTTP/2 或更高版本。请参阅下面的浏览器兼容性。尽管如此，下面的示例仍按照惯例使用 HTTP/1.1 风格的表示法。
语法
103 Early Hints
示例
预连接示例
以下 103 早期提示响应显示了一个早期提示响应，其中服务器指示客户端可能希望预连接到特定源（https://cdn.example.com）。就像 HTML rel=preconnect 属性一样，这是一个提示，表明页面可能需要来自目标资源源的资源，并且浏览器可以通过抢先启动与该源的连接来改善用户体验。
103 Early Hint
Link: <https://cdn.example.com>; rel=preconnect, <https://cdn.example.com>; rel=preconnect; crossorigin
此示例两次预连接到 https://cdn.example.com
- 第一次连接将用于加载无需 CORS 即可获取的资源，例如图像。
- 第二次连接包含
crossorigin属性，将用于加载受 CORS 保护的资源，例如字体。
受 CORS 保护的资源必须通过完全独立的连接获取。如果您只需要来自一个源的一种类型的资源，那么您只需预连接一次。
随后，服务器发送最终响应。这包括一个跨域字体预加载和一个从附加源加载的 <img>。
200 OK
Content-Type: text/html
<!doctype html>
...
<link rel="preload" href="https://cdn.example.com/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>
...
<img src="https://cdn.example.com/images/image.jpg" alt="">
...
预加载示例
以下 103 早期提示响应表示最终响应可能需要样式表 style.css。
103 Early Hint
Link: </style.css>; rel=preload; as=style
随后，服务器发送最终响应。这包括一个指向样式表的链接，该样式表可能已从早期提示中预加载。
200 OK
Content-Type: text/html
<!doctype html>
...
<link rel="stylesheet" rel="preload" href="style.css" />
...
带有 CSP 的早期提示响应
以下示例显示了相同的早期提示响应，但包含 Content-Security-Policy 标头。
103 Early Hint
Content-Security-Policy: style-src: self;
Link: </style.css>; rel=preload; as=style
早期响应将预加载限制为与请求相同的源。如果源匹配，样式表将被预加载。
最终响应可能会将 CSP 设置为 none，如下所示。样式表已经预加载，但在渲染页面时不会使用。
200 OK
Content-Security-Policy: style-src: none;
Content-Type: text/html
<!doctype html>
...
<link rel="stylesheet" rel="preload" href="style.css" />
...
规范
| 规范 |
|---|
| 指示提示的 HTTP 状态码 # 早期提示 |
| HTML # 早期提示 |
浏览器兼容性
加载中…
另见
Link- 跨源资源共享（CORS）
- 内容安全策略（CSP）
rel="preconnect"(<link>属性)rel="preload"(<link>属性)fetchpriority(<link>属性)- 早期提示更新：Cloudflare、Google 和 Shopify 如何共同努力为所有人构建更快的互联网（来自 Cloudflare 博客）