JavaScript 运行时性能分析怎么查看 WebTransport 耗时-js教程-PHP中文网

查看 webtransport 耗时需要结合 performance api 的 performanceresourcetiming 接口与 performance.mark() 手动标记。由于 webtransport 基于 http/3 (quic)，浏览器通常不会自动将其连接建立过程暴露为标准的 resource timing 条目，因此最可靠的方法是手动记录关键节点的时间戳并计算差值。

JavaScript 运行时性能分析怎么查看 WebTransport 耗时

如何获取 WebTransport 连接的建立耗时

要获取连接建立的耗时，需要在创建 WebTransport 实例时捕获 Promise 的解析时间。这反映了从发起请求到 QUIC 握手完成、连接就绪的全过程。

JavaScript 运行时性能分析怎么查看 WebTransport 耗时

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 会抛出异常，此时不应计算耗时。

如何测量 WebTransport 数据流的往返延迟

在连接建立后，可以通过发送探测消息并等待响应来测量数据流的往返延迟（RTT）。这种方法类似于传统的 Ping 机制，但应用于 WebTransport 的数据流上。

modern-javascript-patterns

掌握 ES6+ 特性，包括 async/await、解构、扩展运算符、箭头函数、Promise、模块、迭代器、生成器以及函数式编程模式，编写简洁高效的 Java

下载

JavaScript 运行时性能分析怎么查看 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 来竞争连接建立和超时两个事件。如果在指定的超时时间内连接未建立，将触发超时错误。这样可以避免无限期地等待连接建立，提高应用的健壮性。