UME: 帧数检测

功能查看

今天看看帧数检测功能是如何实现的,老规矩先看看功能是如何使用的,当我们点击了帧数检测后,会出现浮窗

浮窗分为上下两栏,第一栏表示GPU线程,第二栏表示UI线程,

纵轴代表时间,每个图形被分为三格,每小格代表16ms,如果图中超过这三条线之一,那么就代表运行帧率低于60帧

横轴代表帧,该图只会在绘制时更新,图条代表当前帧,只有在绘制时绿条才会动,该图最会绘制最近的三百帧,

当然当前帧也不是一直是绿色的,当当前帧大于16ms时,就会变成红色,就需要检查代码了

源码查看

今天的代码在flutter_ume_kit_perf包中该包中还有CPU检测,目前只支持安卓,所有后续就不介绍了, 今天的代码在该包的performance.dart中, 该方法中没有太多的代码,在build时直接调用了PerformanceOverlay.allEnabled()

Widget build(BuildContext context) {
  return Container(
      alignment: Alignment.topCenter,
      margin: const EdgeInsets.only(top: 20),
      child: SizedBox(
          child: PerformanceOverlay.allEnabled(),
          width: MediaQuery.of(context).size.width));
}

再来看下PerformanceOverlay的构造函数

const PerformanceOverlay({
  Key? key,
  this.optionsMask = 0,
  this.rasterizerThreshold = 0,
  this.checkerboardRasterCacheImages = false,
  this.checkerboardOffscreenLayers = false,
}) : super(key: key);

该构造函数主要有四个属性,没提供太多的属性

optionsMask

用于标记的标志位,有四个标志位

//光栅化器统计信息
PerformanceOverlayOption.displayRasterizerStatistics.index
//可视化光栅化器统计信息
PerformanceOverlayOption.visualizeRasterizerStatistics.index
//显示引擎统计
PerformanceOverlayOption.displayEngineStatistics.index
//可视化引擎统计
PerformanceOverlayOption.visualizeEngineStatistics.index

rasterizerThreshold

光栅化的阈值,用户捕获SkPicture跟踪以进行进一步的分析,默认为0

checkerboardRasterCacheImages

检查缓存图片的情况

checkerboardOffscreenLayers

检查不必要的setlayer

结语

好了今天的源码查看就到这了, 明天将是我们UME系列的最后一期的,如果还有什么想看的源码请在下方评论,我们一起看源码,共同学习

作为Flutter届的一个小学生,希望大家多多指教,有问题的地方一起讨论