HTTP 103早期提示:如何诊断它们是否由Cloudflare正确设置并受到Chrome的尊重

Question

对于我的加密货币市场数据网站

• 我已经在Cloudlare 上启用了早期提示

• 我正在生成关于SvelteKit/Vite web服务器挂钩的早期提示

• 我已验证HTTP回复中是否存在Link标头

Link: </fonts3.css>; rel="preconnect", </_app/assets/start-6f5e0715.css>; rel="preconnect", </_app/assets/pages/__layout.svelte-f31b19cc.css>; rel="preconnect", </_app/assets/pages/index.svelte-84a34be8.css>; rel="preconnect"

• 我启用了Chrome命令行标志以尊重早期提示

现在，我如何验证

• Cloudflare正在正确生成HTTP/1.1 103 Early Hints。我可以用curl或wget显示此信息吗？

• Chrome尊重早期的提示——这是在webr开发工具的性能选项卡中显示的，还是在其他地方？

Answer 1

我没有幸从Chrome的开发工具中验证Chrome的响应。当我监控网络流量时，Chrome开发工具根本不会显示103个响应。然而，我能够使用curl来验证服务器103的响应。以下是卷曲输出示例：

$curl-k-v--http2https://evanella.org

• 升级后将流缓冲区中的HTTP/2数据复制到连接缓冲区：len=0
• 使用流ID:1(易处理0x7fa7a2009200(

GET/HTTP/2主持人：evanella.org用户代理：curl/7.64.1接受：/

。。。

• 连接状态已更改(MAX_CONCURRENT_STREAMS==100(

<HTTP/2 103

<链接：https://evanella.org/；rel=预载荷；

<链接：https://evanella.org/wp-content/themes/twentytwentytwo/assets/fonts/SourceSerif4Variable-Roman.ttf.woff2；rel=预载荷；as=font

<链接：https://evanella.org/wp-content/themes/twentytwentytwo/assets/images/flight-path-on-transparent-d.png；rel=预载荷；as=图像

<链接：https://evanella.org/wp-content/themes/twentytwentytwo/style.css?ver=1.1；rel=预载荷；as=样式

<链接：https://evanella.org/wp-includes/blocks/navigation/view.min.js?ver=3776ea67846b3bb10fe8f7cdd486b0ba；rel=预载荷；as=脚本

<HTTP/2 200

<服务器：h2o/2.3.0-DEV@998a7fb7b

<内容类型：text/html；charset=UTF-8

<链接：https://evanella.org/wp-json/；rel＝"；https://api.w.org/">

<变化：接受编码

顺便说一句，我配置了自己的Web服务器来生成103个早期提示响应。

Answer 2

此网站是一个在线工具，用于测试是否提供早期提示：

https://code103.hotmann.de

Answer 3

在chrome中，您可以在控制台中输入以下内容：

performance.getEntriesByName('https://yourwebsite.com/image.jpg')[0].initiatorType其将分别输出link或early-hints(可能更多的值等(，在early-hints的情况下，其指示特定资产下载是由103报头发起的。

在我的情况下，我一直在接收link，而early-hints是预期的。如果我在调试过程中了解到更多信息，将更新此响应。