You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在Chrome DevTools中获取性能录制的平均FPS

获取已录制性能数据的平均FPS解决方案

我完全理解这种手动统计所有帧FPS的痛苦——反复逐个计数求和确实太浪费时间了!针对这个需求,这里有几个实用的方法帮你快速算出平均FPS:

  • 利用浏览器DevTools内置统计
    你提到Firefox DevTools会在面板右上角直接显示平均FPS,这确实很方便。如果是其他主流浏览器(比如Chrome/Edge),也可以这么找:

    1. 完成性能录制后,切换到性能面板的**摘要(Summary)**标签页,在FPS模块里就能看到平均值、峰值这类统计数据;
    2. 要是没看到,点击面板顶部工具栏的三个点图标,检查是否有“显示FPS统计”的勾选选项,开启后就能直接查看。
  • 用控制台脚本自动计算
    如果内置统计找不到或者不符合需求,一段简单的脚本就能帮你快速计算:

    1. 录制完性能数据后,打开DevTools的控制台(Console),运行这段代码:
      // 获取所有录制的帧数据
      const frames = performance.getEntriesByType('frame');
      if (frames.length === 0) {
        console.log('未找到录制的帧数据,请确认已完成性能录制');
        return;
      }
      // 计算总时长与总帧数
      const totalDuration = frames.reduce((sum, frame) => sum + frame.duration, 0);
      const totalFrames = frames.length;
      // 计算平均FPS(转换为秒后计算)
      const averageFPS = totalFrames / (totalDuration / 1000);
      console.log(`平均FPS: ${averageFPS.toFixed(2)}`);
      

    脚本会自动提取所有帧数据,算出总时长和帧数,最后输出保留两位小数的平均FPS,精度可以通过toFixed()参数调整。

  • 导出数据到表格工具计算
    如果你更习惯用表格工具处理数据:

    1. 在性能面板的帧数据区域右键,选择“导出数据”(Export data),一般会导出为CSV格式;
    2. 用Excel、Google Sheets等打开CSV文件,找到帧时长列计算总时长,再用总帧数除以总时长(转换为秒),就能得到平均FPS。

内容的提问来源于stack exchange,提问作者Robbendebiene

火山引擎 最新活动