60Hz显示器下如何基准测试WebGL应用？求Ubuntu/浏览器/代码方案

一、修改WebGL代码绕开requestAnimationFrame的帧率限制 #

requestAnimationFrame会强制同步显示器刷新率，要测真实性能得脱离这个绑定：

• 用定时器手动驱动渲染循环：直接通过setTimeout或setInterval调度渲染，不依赖浏览器的刷新同步逻辑。示例代码：

  let frameCount = 0;
  const testDuration = 10000; // 测试10秒
  let startTime = performance.now();
  
  function renderLoop() {
    // 执行你的WebGL渲染逻辑
    gl.clear(gl.COLOR_BUFFER_BIT);
    // ...绘制代码
  
    frameCount++;
    const elapsed = performance.now() - startTime;
    if (elapsed < testDuration) {
      setTimeout(renderLoop, 0); // 尽可能快地调度下一帧
    } else {
      const actualFps = frameCount / (elapsed / 1000);
      console.log(`实际渲染帧率: ${actualFps.toFixed(2)} FPS`);
    }
  }
  renderLoop();
  

  注意：这种方式会让GPU/CPU全力运行，测试时留意设备发热，结束后及时停止循环。
• 统计单帧渲染耗时：不用测整体FPS，直接计算单帧从开始到结束的耗时，反推理论最大性能。示例：

  function render() {
    console.time('frame-cost');
    // WebGL绘制操作
    gl.clear(gl.COLOR_BUFFER_BIT);
    // ...绘制逻辑
    console.timeEnd('frame-cost');
    requestAnimationFrame(render);
  }
  

  比如单帧耗时1.5ms，理论最大FPS就是1000/1.5≈667，这种方式完全不受显示器刷新率限制，更能反映渲染核心的性能。

二、浏览器层面的设置调整 #

• 禁用性能节流：
  在Chrome/Firefox的开发者工具Performance面板中，勾选Disable throttling选项，同时关闭Smooth scrolling等可能限制帧率的功能。
• 启用无头浏览器测试：
  无头模式下浏览器不会渲染到物理显示器，能突破刷新率限制。以Chrome为例，执行命令启动：

  google-chrome --headless --disable-gpu --run-all-compositor-stages-before-draw your-webgl-app-url
  

  配合代码里的帧率统计逻辑，就能拿到真实的GPU渲染性能数据。

三、Ubuntu 22.04系统层面的优化 #

• 关闭GNOME合成器：
  GNOME Shell的合成器会强制同步显示器刷新率，关闭后可解除这个限制。执行命令：

  gnome-shell --replace --disable-software-rendering &
  

  测试完成后，执行gnome-shell --replace &恢复正常合成器。
• 切换到高性能模式：
  打开系统设置→电源→性能模式，切换为高性能，避免CPU/GPU因节能降频影响测试结果。

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