如何代码获取 Flutter APP 的 FPS

众所周知，官方提供了好几个办法来让我们在开发 Flutter app 的过程中可以使用查看 fps等性能数据，如devtools，具体见文档 Debugging Flutter apps 、Flutter performance profiling 等。

但是这些工具统计到的数据充其量只能算开发过程中的“试验室”数据，假如需要统计app 在线上在用户手机上的运行情况，该如何在 flutter 端代码里自己计算性能数据，比如 fps 这个值呢？

经过阅读源码，发现其实很简单，给window对象注册 onReportTimings 即可，去看api文档。

1 2 3 4 5 6 7 8

void main() { runApp(...); window.onReportTimings = _onReportTimings; } void _onReportTimings(List<FrameTiming> timings) { // TODO }

注意：当升级到Flutter 1.12.x 之后，onReportTimings应该改成SchedulerBinding的addTimingsCallback

1 2 3 4 5 6 7 8 9 10 11

// 需监听fps时注册 void start() { SchedulerBinding.instance.addTimingsCallback(_onReportTimings); } // 不需监听时移除 void stop() { SchedulerBinding.instance.removeTimingsCallback(_onReportTimings); } void _onReportTimings(List<FrameTiming> timings) { // TODO }

代码给你看

考虑计算fps，只需要保留最近 N 个FrameTiming 来计算即可，最好用类似stack的数据结构存起来，参考了文档，我们选用 Queue ，N 指定为 100

1 2 3 4 5 6 7 8 9 10 11 12 13 14

const maxframes = 100; // 100 帧足够了，对于 60 fps 来说 final lastFrames = ListQueue<FrameTiming>(maxframes); void _onReportTimings(List<FrameTiming> timings) { // 把 Queue 当作堆栈用 for (FrameTiming timing in timings) { lastFrames.addFirst(timing); } // 只保留 maxframes while (lastFrames.length > maxframes) { lastFrames.removeLast(); } }

1 2 3 4 5 6 7 8 9

+---------------------------------------------------------------+ + + +----------+ +-----+ +---------+ CPU | | | | | | +----------+ +-----+ ... +---------+ +-------+ +-------+ +--------+ GPU | | | | | | +-------+ +-------+ +--------+

lastFrames 的头就是最后一帧，尾是队伍里最开始的一帧，现在你可以计算 FPS 了：

1 2 3 4 5 6 7 8

double get fps { int frames = lastFrames.length; var start = lastFrames.last.timestampInMicroseconds(FramePhase.buildStart); var end = lastFrames.first.timestampInMicroseconds(FramePhase.rasterFinish); var duration = (end - start) / Duration.microsecondsPerMillisecond; return frames * Duration.millisecondsPerSecond / duration; }

但，你会发现，这样算出来和官方工具算的对不上，而且错的离谱。

why ??

代码再给你看一下

其实，window.onReportTimings 只会在有帧被绘制时才有数据回调，换句话说，你没有和app发生交互、界面状态没有变化（setState）、没有定时刷布局（动画）等等没有新的帧产生，所以lastFrames里存的可能是分属不同“绘制时间段”的帧信息。

1 2 3 4 5 6 7 8 9 10 11 12

+------------------------------------------------------------------------------------------------------+ + + +----------+ +-----+ +---------+ +----------+ +---------+ CPU | | | | | | | | | | +----------+ +-----+ +---------+ +----------+ +---------+ +-------+ +-------+ +--------+ +-------+ +--------+ GPU | | | | | | | | | | +-------+ +-------+ +--------+ +-------+ +--------+ + + + + +-----------------frameset1---------------------------+ +---------------frameset2-------------+

假设一秒最多绘制 60 帧，每帧消耗的时间 frameInterval 为：

1 2	const REFRESH_RATE = 60; const frameInterval = const Duration(microseconds: Duration.microsecondsPerSecond ~/ REFRESH_RATE);

flutter 引擎应该就是根据该frameInterval 按计划绘制每一帧，即如果一帧绘制时间少于 frameInterval 则下一帧会等待一点点时间，而当一帧绘制时间超过frameInterval 则下一帧会因为“原计划时间”被占用而紧接着执行绘制（我没看源码猜的，如果跟你认知的不一样，可以评论一下）。

可以认为 lastFrames 里的相邻两帧如果开始结束相差时间过大，比如大于 frameInterval * 2，是不同绘制时间段产生的。那么我们采取最后一个时间段来计算 FPS：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

double get fps { var lastFramesSet = <FrameTiming>[]; for (FrameTiming timing in lastFrames) { if (lastFramesSet.isEmpty) { lastFramesSet.add(timing); } else { var lastStart = lastFramesSet.last.timestampInMicroseconds(FramePhase.buildStart); if (lastStart - timing.timestampInMicroseconds(FramePhase.rasterFinish) > ( frameInterval.inMicroseconds * 2)) { // draw in different set break; } lastFramesSet.add(timing); } } var frameCount = lastFramesSet.length; var duration = ( lastFramesSet.first.timestampInMicroseconds(FramePhase.rasterFinish) - lastFramesSet.last.timestampInMicroseconds(FramePhase.buildStart) ) ~/ Duration.microsecondsPerMillisecond; return frameCount * Duration.millisecondsPerSecond / duration; }

此时又会发现，算出来的 FPS 有时会超过 60。

why ??

代码给你看，真的

因为上面的 duration 其实算的不对。

前面提到，flutter 是按 frameInterval 计划绘制的，所以 duration 算出来偏小，进而导致计算结果超过 60。

换个思路，遵循之前的按计划绘制的逻辑，如果一帧绘制时长超过frameInterval ，那么它必然会占用下一个帧的绘制计划，这个被挤占的帧即为丢帧，显然，一秒内总绘制的帧数加上总丢掉帧数应该约等于 60。

所以，FPS ≈ REFRESH_RATE * framesCount / (framesCount + droppedCount) = REFRESH_RATE * framesCount / costCount

修改之前的代码，套入公式即为：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

double get fps { var lastFramesSet = <FrameTiming>[]; for (FrameTiming timing in lastFrames) { if (lastFramesSet.isEmpty) { lastFramesSet.add(timing); } else { var lastStart = lastFramesSet.last.timestampInMicroseconds(FramePhase.buildStart); if (lastStart - timing.timestampInMicroseconds(FramePhase.rasterFinish) > ( _frameInterval.inMicroseconds * 2)) { // in different set break; } lastFramesSet.add(timing); } } var framesCount = lastFramesSet.length; var costCount = lastFramesSet.map((t) { // 耗时超过 frameInterval 会导致丢帧 return (t.totalSpan.inMicroseconds ~/ frameInterval.inMicroseconds) + 1; }).fold(0, (a, b)=> a + b); return framesCount * REFRESH_RATE / costCount; }

好了，现在你会发现，算出来和Flutter Performance 中看到的几乎一模一样：

但是，不要忘了前提是你的手机屏幕刷新率 REFRESH_RATE 恰好是我一开始假设的 60，那刷新率不是 60 怎么办？就留给你自己思考了<(▰˘◡˘▰)>

还有几行关键代码

对于 Android 通过 WindowManager 获取刷新率：

1 2	WindowManager windowManager = (WindowManager) applicationContext.getSystemService(Context.WINDOW_SERVICE)) float fps = windowManager.getDefaultDisplay().getRefreshRate();

对于iOS 从 CADisplayLink 获取刷新率：

1 2 3 4

auto preferredFPS = displayLink.preferredFPS; if (preferredFPS == 0) { float fps = [UIScreen mainScreen].maximumFramesPerSecond; }

本文完。

ps. 完整代码见gist

Author: Yrom

Link: https://yrom.net/blog/2019/08/01/how-to-get-fps-in-flutter-app-codes/

License: 知识共享署名-非商业性使用 4.0 国际许可协议