前言

對于任何一款應用來說，頁面的流暢度是用戶體驗最重要的幾個指標之一。我們需要用數據的形式標識出頁面的流暢程度。

如何了解頁面流暢度

對于大部分人而言，當每秒的畫面達到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: ...,
    )

demo演示

如圖，PerformanceOverLay 會分別為我們展示了構建（UI）耗時和渲染（Raster）耗時。

注意：我們在判斷流暢度的時候，要看一幀的總耗時(UI耗時+Raster耗時)。

2. fps_monitor

一款pub上的開源工具，鏈接地址：fps_monitor

集成步驟

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

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屬性中包裹組件
  
  demo演示

與 PerformanceOverLay 不同，fps_monitor在使用上更加直觀，省略了兩組數據的相加。

原理分析：

• Flutter 會在每幀完成繪制后，將耗時進行回調List<FrameTiming>。[構建時間；繪制時間；總時間]。WidgetsBinding.instance.addTimingsCallback(Function(List<FrameTiming> timings));
• 每一幀的耗時 duration = frameTiming.totalSpan.inMilliseconds.toDouble()
• 根據每一幀的耗時，依照規則進行流暢度匹配，完成widget的繪制。然后通過overlay.insert()，作為浮窗展示給開發者