如何验证Chrome是否预加载103 Early Hints响应中提示的资源？

1. 深挖DevTools网络面板细节 #

• 针对preconnect提示：在网络面板的「Initiator」列中，目标域名的连接请求发起者会显示为Early Hints。可以切换到「Other」请求类型筛选，更快定位这类连接请求。
• 针对preload/modulepreload资源：查看资源的「Timing」标签页，会明确显示加载触发源为「Early Hints」；同时这类资源的加载启动时间会早于主文档（200响应）的解析完成时间，发起者也会标记为Early Hints。

2. 用Performance面板追踪加载时序 #

• 录制页面加载的性能日志，在「Network」区块能直观看到：
  • preload的资源会在主文档HTML还没接收完成时就启动加载，时间线明显早于主文档的「Finish」节点。
  • preconnect的连接会在页面加载初期就建立，省去后续请求的TCP握手、TLS协商耗时。

3. 查看Chrome内部网络日志 #

• 启动Chrome时添加命令行参数：--log-net-log=netlog.json，加载目标页面后关闭浏览器，找到生成的netlog.json文件。可以通过Chrome的chrome://net-internals/#import导入日志，搜索「EarlyHints」关键词，就能看到浏览器处理103响应的完整流程，包括是否执行了对应的链接提示。

4. 对比加载性能验证效果 #

• 关闭103 Early Hints功能，对比前后页面的加载数据：
  • 观察关键资源的「Start Time」，启用103后资源加载启动更早，就说明浏览器已经利用了提示。
  • 用Lighthouse运行跑分，对比「Preload key requests」等相关指标的变化，也能侧面验证优化效果。

内容的提问来源于stack exchange，提问作者Gajus