在 javascript 运行时中查看 quic 耗时，核心方法是利用 chrome devtools 的 performance（性能）面板或 network（网络）面板。具体做法是开启 performance 录制并过滤 http/3 请求，或在 network 面板中启用“显示协议”列以直接读取 quic 时间戳。这样做能明确区分 tcp 握手、tls 协商与 quic 传输的具体耗时分布。
如何在 Performance 面板中定位 QUIC 耗时
Performance 面板通过时间轴展示浏览器内部事件，查看 QUIC 耗时需先确保录制期间有 HTTP/3 流量。打开 DevTools 切换到 Performance 标签，点击录制按钮，执行包含 HTTPS 请求的操作后停止。在生成的火焰图中，展开 Main 线程下的 Fetch/XHR 事件，若请求使用 QUIC，其子事件会显示具体的连接建立过程。QUIC 的耗时通常体现在 `SocketHandle` 或 `Network` 相关的子任务中，特别是 `CreateQuicTransport` 和 `SendRequest` 阶段。通过对比这些子任务的持续时间，可以计算出从发起请求到数据发送的总开销。
const url = 'https://httpbin.org/get'; fetch(url).then(r => r.json()).then(console.log); // 在 DevTools -> Network 面板 // 1. 勾选 "Enable HTTP/3" (如果可用) // 2. 刷新页面 // 3. 在表格中找到该请求 // 4. 查看 "Protocol" 列是否为 h3 // 5. 查看 "Timing" 标签页中的 "Start Time" 和 "End Time"
如何通过 Network 面板获取精确的时间戳
Network 面板提供更细粒度的时间数据，适合需要精确到毫秒级的分析。在 DevTools 的 Network 标签下，右键表头选择 “Timing” 列以确保其可见。当请求使用 QUIC 协议时，DevTools 会将连接建立、TLS 握手和数据传输的时间点拆解展示。重点关注 `Stalled`、`DNS Lookup`、`Initial Connection` 和 `Request Sent` 这几个阶段。对于 QUIC，`Initial Connection` 阶段包含了 UDP 包交换和 0-RTT 或 1-RTT 握手的时间。通过计算 `Request Sent` 减去 `Initial Connection` 开始的时间，可以得到纯 QUIC 传输层的耗时。此外，Chrome 97+ 版本在 Network 面板中直接显示了 `Protocol` 列，标记为 `h3` 的请求即为 QUIC 请求。
基于 fetch 请求返回结果的具体问题分析
当使用 `fetch` API 发起请求时，如果服务器支持 HTTP/3，JavaScript 代码本身无法直接感知底层使用的是 QUIC 还是 TCP，因为 API 是抽象的。但是，可以通过检查 `Response` 对象的某些属性或结合 DevTools 来验证。实际上，标准的 `fetch` Response 对象并不直接暴露协议类型。要确认 QUIC 是否生效并分析其影响，必须依赖浏览器的开发者工具。如果在 Performance 面板中看到大量的 `QuicStream` 相关事件且耗时显著低于传统 TCP+TLS 组合，则说明 QUIC 正在发挥作用。反之，如果回退到 HTTP/2，这些事件将消失或被替换为 `TCPSocket` 相关事件。因此，JS 层面的“查看”本质上是通过外部工具观察 JS 运行时触发的网络行为。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
