WebGPU多Pass管线中特定Compute Pass执行时间的测量与基准测试方法

当然有可靠的方法来测量多Pass计算管线中单个Compute Pass的执行时间，以下是几种实用方案，帮你精准定位性能瓶颈：

1. 原生Timestamp Query API（最客观的基准方案） #

WebGPU内置了时间戳查询API，能直接获取GPU层面的执行时间，是最准确的基准测试方式：

步骤： #

• 创建查询集：用device.createQuerySet()创建类型为timestamp的查询集，每个Compute Pass需要2个时间戳（开始和结束），所以查询集的数量要对应你要测试的Pass数×2。
• 插入时间戳：在每个Compute Pass的开始和结束位置，调用passEncoder.writeTimestamp()记录时间戳。
• 解析并读取结果：将查询集的结果解析到缓冲区，映射缓冲区后计算时间差，再用device.limits.timestampPeriod将GPU时钟周期转换为实际时间（秒/毫秒）。

代码示例： #

// 假设要测试2个Compute Pass，需要4个时间戳（每个Pass开始+结束）
const querySet = device.createQuerySet({
  type: 'timestamp',
  count: 4
});

// 创建用于存储查询结果的缓冲区（每个时间戳8字节）
const resultBuffer = device.createBuffer({
  size: 4 * 8,
  usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.MAP_READ
});

// 录制计算命令
const commandEncoder = device.createCommandEncoder();

// 测试第一个Compute Pass
const pass1 = commandEncoder.beginComputePass();
pass1.writeTimestamp(querySet, 0); // 记录Pass1开始时间
// 执行Pass1的计算逻辑
pass1.setPipeline(computePipeline1);
pass1.setBindGroup(0, bindGroup1);
pass1.dispatchWorkgroups(64, 64);
pass1.writeTimestamp(querySet, 1); // 记录Pass1结束时间
pass1.end();

// 测试第二个Compute Pass
const pass2 = commandEncoder.beginComputePass();
pass2.writeTimestamp(querySet, 2); // 记录Pass2开始时间
// 执行Pass2的计算逻辑
pass2.setPipeline(computePipeline2);
pass2.setBindGroup(0, bindGroup2);
pass2.dispatchWorkgroups(32, 32);
pass2.writeTimestamp(querySet, 3); // 记录Pass2结束时间
pass2.end();

// 将查询结果解析到缓冲区
commandEncoder.resolveQuerySet(querySet, 0, 4, resultBuffer, 0);

// 提交命令队列
device.queue.submit([commandEncoder.finish()]);

// 读取并计算时间
await resultBuffer.mapAsync(GPUMapMode.READ);
const timestamps = new BigUint64Array(resultBuffer.getMappedRange());
const timestampPeriod = device.limits.timestampPeriod; // 单位：秒/时钟周期

// 转换为毫秒
const pass1Duration = (timestamps[1] - timestamps[0]) * timestampPeriod * 1000;
const pass2Duration = (timestamps[3] - timestamps[2]) * timestampPeriod * 1000;

console.log(`Pass1 耗时: ${pass1Duration.toFixed(2)}ms`);
console.log(`Pass2 耗时: ${pass2Duration.toFixed(2)}ms`);

resultBuffer.unmap();

2. 控制变量隔离测试 #

如果要排除管线中其他环节的干扰，比如资源绑定、队列调度的影响，可以将目标Compute Pass单独提取出来，独立运行并多次测量取平均值：

• 单独录制目标Pass的命令，循环执行100-1000次（减少单次调度的波动）
• 对比单独执行时长和在完整管线中的时长，判断是否存在资源竞争或上下文切换的额外开销

3. 浏览器DevTools可视化分析 #

主流浏览器的DevTools提供了WebGPU的性能分析工具，能直观看到每个Pass的执行 timeline：

• Chrome：打开Performance面板，勾选「WebGPU」选项，捕获性能快照后，在「WebGPU」栏下能看到每个Compute Pass的执行时长、调度延迟。
• Firefox：使用WebGPU Inspector插件，可查看Pass级别的执行时间线和资源使用情况。

注意事项： #

• 时间戳查询本身有微小的性能开销，仅用于基准测试，不要在生产代码中频繁使用。
• GPU调度存在波动，单次测量结果可能不准确，建议多次执行后取中位数或百分位数（比如第95百分位）来反映真实性能。
• 不同GPU的timestampPeriod值不同，必须用当前设备的参数进行时间转换，否则结果会失真。

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