Flutter: 卡顿检测，实用小工具推荐

前言

对于任何一款应用来说，页面的流畅度是用户体验最重要的几个指标之一。我们需要用数据的形式标识出页面的流畅程度。

如何了解页面流畅度

对于大部分人而言，当每秒的画面达到60，也就是俗称60FPS的时候，整个过程就是流畅的。一秒 60 帧，也就意味着平均两帧之间的间隔为 16.7ms。但并不意味着一秒低于60帧，人眼就会感觉到卡顿。小轰将查阅到的资料列出如下：

• 
  
• 流畅：FPS大于55，即一帧耗时低于 18ms
  
• 良好：FPS在30-55之间，即一帧耗时在 18ms-33ms 之间
  
• 轻微卡顿：FPS在15-30之间，即一帧耗时在 33ms-67ms 之间
  
• 卡顿：FPS低于15，即一帧耗时大于 66.7ms
  

两款帧率检测工具

1. PerformanceOverLay

官方SDK为开发者提供的帧率检测工具，使用非常简单，在MaterialApp下添加属性showPerformanceOverlay:true。

MaterialApp(

      showPerformanceOverlay: true,

      home: ...,

    )

如图，PerformanceOverLay 会分别为我们展示了构建（UI）耗时和渲染（Raster）耗时。

注意：我们在判断流畅度的时候，要看一帧的总耗时(UI耗时+Raster耗时)。

2. fps_monitor

一款pub上的开源工具，链接地址：fps_monitor

集成步骤

1. 
   
2. 添加引用 fps_monitor: ^2.0.0
   
3. 根布局添加包裹组件
   

Widget build(BuildContext context) {

    GlobalKey<NavigatorState> globalKey = GlobalKey();

    WidgetsBinding.instance.addPostFrameCallback((t) {

      //overlayState 为 fps_monitor 内提供变量，用于overlay.insert

      overlayState = globalKey.currentState.overlay;

    });

    return MaterialApp(

      showPerformanceOverlay: false,

      navigatorKey: globalKey,

      builder: (ctx, child) => CustomWidgetInspector(

        child: child,

      ),

      home: MyApp(),

    );

  }

复制代码

参数说明

• 
  
• navigatorKey : MaterialApp指定GlobalKey
  
• overlayState 赋值： 指定overLayState ，因为需要弹出一个Fps的统计页面，所以当前指定overLayState。
  
• CustomWidgetInspector: 在build属性中包裹组件
  

与 PerformanceOverLay 不同，fps_monitor在使用上更加直观，省略了两组数据的相加。

原理分析：

• 
  
• Flutter 会在每帧完成绘制后，将耗时进行回调List<FrameTiming> 。[构建时间；绘制时间；总时间]。WidgetsBinding.instance.addTimingsCallback(Function(List<FrameTiming> timings));
  
• 每一帧的耗时 duration = frameTiming.totalSpan.inMilliseconds.toDouble()
  
• 根据每一帧的耗时，依照规则进行流畅度匹配，完成widget的绘制。然后通过 overlay.insert()，作为浮窗展示给开发者