如何在Chrome DevTools中获取性能录制的平均FPS
获取已录制性能数据的平均FPS解决方案
我完全理解这种手动统计所有帧FPS的痛苦——反复逐个计数求和确实太浪费时间了!针对这个需求,这里有几个实用的方法帮你快速算出平均FPS:
利用浏览器DevTools内置统计
你提到Firefox DevTools会在面板右上角直接显示平均FPS,这确实很方便。如果是其他主流浏览器(比如Chrome/Edge),也可以这么找:- 完成性能录制后,切换到性能面板的**摘要(Summary)**标签页,在FPS模块里就能看到平均值、峰值这类统计数据;
- 要是没看到,点击面板顶部工具栏的三个点图标,检查是否有“显示FPS统计”的勾选选项,开启后就能直接查看。
用控制台脚本自动计算
如果内置统计找不到或者不符合需求,一段简单的脚本就能帮你快速计算:- 录制完性能数据后,打开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()参数调整。- 录制完性能数据后,打开DevTools的控制台(Console),运行这段代码:
导出数据到表格工具计算
如果你更习惯用表格工具处理数据:- 在性能面板的帧数据区域右键,选择“导出数据”(Export data),一般会导出为CSV格式;
- 用Excel、Google Sheets等打开CSV文件,找到帧时长列计算总时长,再用总帧数除以总时长(转换为秒),就能得到平均FPS。
内容的提问来源于stack exchange,提问作者Robbendebiene




