如何代码获取 Flutter APP 的 FPS

Bertha 。 2022-11-06 13:59 253阅读 0赞

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

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

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
</pre> </td> 
   <td> <pre>void main() {
  runApp(...);
  window.onReportTimings = _onReportTimings;
}

void _onReportTimings(List&lt;FrameTiming&gt; timings) {
  // TODO
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
</pre> </td> 
   <td> <pre>// 需监听fps时注册
void start() {
  SchedulerBinding.instance.addTimingsCallback(_onReportTimings);
}
// 不需监听时移除
void stop() {
  SchedulerBinding.instance.removeTimingsCallback(_onReportTimings);
}
void _onReportTimings(List&lt;FrameTiming&gt; timings) {
  // TODO
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

### 代码给你看 ###

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre> </td> 
   <td> <pre>const maxframes = 100; // 100 帧足够了，对于 60 fps 来说
final lastFrames = ListQueue&lt;FrameTiming&gt;(maxframes);

void _onReportTimings(List&lt;FrameTiming&gt; timings) {
  // 把 Queue 当作堆栈用
  for (FrameTiming timing in timings) {
    lastFrames.addFirst(timing);
  }

// 只保留 maxframes
  while (lastFrames.length &gt; maxframes) {
    lastFrames.removeLast();
  }
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
</pre> </td> 
   <td> <pre>       +---------------------------------------------------------------+
       +                                                               +

+----------+        +-----+                     +---------+
CPU    |          |        |     |                     |         |
       +----------+        +-----+            ...      +---------+
                +-------+       +-------+                     +--------+
GPU             |       |       |       |                     |        |
                +-------+       +-------+                     +--------+
</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
</pre> </td> 
   <td> <pre>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;
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

why ??

### 代码再给你看一下 ###

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre> </td> 
   <td> <pre>       +------------------------------------------------------------------------------------------------------+
       +                                                                                                      +

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

+                                                     +          +                                     +
       +-----------------frameset1---------------------------+          +---------------frameset2-------------+
</pre> </td> 
  </tr> 
 </tbody> 
</table>

[![render pipeline][]][render pipeline 1]

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
</pre> </td> 
   <td> <pre>const REFRESH_RATE = 60;
const frameInterval = const Duration(microseconds: Duration.microsecondsPerSecond ~/ REFRESH_RATE);
</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
</pre> </td> 
   <td> <pre>double get fps {
  var lastFramesSet = &lt;FrameTiming&gt;[];
  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) &gt; ( 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;
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

why ??

### 代码给你看，真的 ###

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

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

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

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

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
</pre> </td> 
   <td> <pre>double get fps {
  var lastFramesSet = &lt;FrameTiming&gt;[];
  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) &gt; ( _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)=&gt; a + b);
  return framesCount * REFRESH_RATE / costCount;
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

[![屏幕快照.png][.png]][.png_.png]

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

### 还有几行关键代码 ###

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
</pre> </td> 
   <td> <pre>WindowManager windowManager = (WindowManager) applicationContext.getSystemService(Context.WINDOW_SERVICE))
float fps = windowManager.getDefaultDisplay().getRefreshRate();
</pre> </td> 
  </tr> 
 </tbody> 
</table>

对于iOS 从 [CADisplayLink][] 获取刷新率：

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
</pre> </td> 
   <td> <pre>auto preferredFPS = displayLink.preferredFPS;
if (preferredFPS == 0) {
  float fps = [UIScreen mainScreen].maximumFramesPerSecond;
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

**本文完。**

ps. 完整代码见[gist][]

Author: [Yrom][]

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

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

[devtools]: https://github.com/flutter/devtools
[Debugging Flutter apps]: https://flutter.dev/docs/testing/debugging
[Flutter performance profiling]: https://flutter.dev/docs/testing/ui-performance
[api]: https://api.flutter.dev/flutter/dart-ui/Window/onReportTimings.html
[Queue]: https://api.dartlang.org/stable/2.4.0/dart-collection/Queue-class.html
[render pipeline]: /images/20221023/97e71891390f49939d1c2f62bea7505c.png
[render pipeline 1]: https://flutter.dev/images/arch-overview/render-pipeline.png
[.png]: https://img-blog.csdnimg.cn/img_convert/b6a36afd191b8ace3c0452b1df97361d.png
[.png_.png]: https://i.loli.net/2019/08/01/5d42a8efe898385929.png
[CADisplayLink]: https://developer.apple.com/documentation/quartzcore/cadisplaylink/1648421-preferredframespersecond
[gist]: https://gist.github.com/yrom/ac4f30b26ee02ce3bd3a1d260bb9ffb4
[Yrom]: https://yrom.net/
[https_yrom.net_blog_2019_08_01_how-to-get-fps-in-flutter-app-codes]: https://yrom.net/blog/2019/08/01/how-to-get-fps-in-flutter-app-codes/
[-_ 4.0]: http://creativecommons.org/licenses/by-nc/4.0/