查看 webtransport 耗时需要结合 performance api 的 performanceresourcetiming 接口与 performance.mark() 手动标记。由于 webtransport 基于 http/3 (quic)，浏览器通常不会自动将其连接建立过程暴露为标准的 resource timing 条目，因此最可靠的方法是手动记录关键节点的时间戳并计算差值。
如何获取 WebTransport 连接的建立耗时
要获取连接建立的耗时，需要在创建 WebTransport 实例时捕获 Promise 的解析时间。这反映了从发起请求到 QUIC 握手完成、连接就绪的全过程。
const url = 'https://example.com';
const startMark = 'wt-connect-start';
performance.mark(startMark);
try {
const transport = new WebTransport(url);
await transport.ready;
const endMark = 'wt-connect-end';
performance.mark(endMark);
const entry = performance.getEntriesByName(endMark)[0];
const startTime = performance.getEntriesByName(startMark)[0].startTime;
const duration = entry.startTime - startTime;
console.log(`Connection established in ${duration}ms`);
} catch (error) {
console.error('Connection failed:', error);
}
上述代码首先标记开始时间，然后等待 transport.ready Promise 解决。一旦连接就绪，立即标记结束时间。通过计算两个标记之间的时间差，即可得到精确的连接建立耗时。如果连接失败，Promise 会抛出异常，此时不应计算耗时。
立即学习“Java免费学习笔记（深入）”；
掌握 ES6+ 特性，包括 async/await、解构、扩展运算符、箭头函数、Promise、模块、迭代器、生成器以及函数式编程模式，编写简洁高效的 Java
如何测量 WebTransport 数据流的往返延迟
在连接建立后，可以通过发送探测消息并等待响应来测量数据流的往返延迟（RTT）。这种方法类似于传统的 Ping 机制，但应用于 WebTransport 的数据流上。
const transport = new WebTransport('https://example.com');
await transport.ready;
// 创建一个双向流
const stream = await transport.createBidirectionalStream();
const reader = stream.readable.getReader();
const writer = stream.writable.getWriter();
// 发送探测消息
const probeMessage = new TextEncoder().encode('ping');
await writer.write(probeMessage);
// 读取响应
const responseBuffer = await reader.read();
const responseText = new TextDecoder().decode(responseBuffer.value);
if (responseText === 'pong') {
console.log('Pong received');
} else {
console.error('Unexpected response:', responseText);
}
// 关闭流
writer.close();
reader.releaseLock();
在这个示例中，我们创建了一个双向流，发送一个 "ping" 消息，然后等待 "pong" 响应。虽然这个示例没有直接计算 RTT，但你可以在发送和接收之间插入时间戳来计算延迟。需要注意的是，WebTransport 的流是异步的，因此需要确保在发送消息后正确等待响应。
如何处理 WebTransport 连接中的错误和超时
在处理 WebTransport 连接时，可能会遇到各种错误和超时情况。为了有效地处理这些问题，需要在代码中添加适当的错误处理和超时机制。
const timeoutMs = 5000;
const transport = new WebTransport('https://example.com');
const connectPromise = transport.ready;
const timeoutPromise = new Promise((_, reject) => {
setTimeout(() => reject(new Error('Connection timeout')), timeoutMs);
});
try {
await Promise.race([connectPromise, timeoutPromise]);
console.log('Connection established within timeout');
} catch (error) {
if (error.message === 'Connection timeout') {
console.error('Connection timed out after', timeoutMs, 'ms');
} else {
console.error('Connection failed:', error);
}
}
这段代码使用 Promise.race 来竞争连接建立和超时两个事件。如果在指定的超时时间内连接未建立，将触发超时错误。这样可以避免无限期地等待连接建立，提高应用的健壮性。
