flutter页面卡顿检测

作者: 李小轰 | 来源:发表于2021-09-10 15:04 被阅读0次

    前言

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

    如何了解页面流畅度

    对于大部分人而言,当每秒的画面达到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(),作为浮窗展示给开发者

    相关文章

      网友评论

        本文标题:flutter页面卡顿检测

        本文链接:https://www.haomeiwen.com/subject/pbzgwltx.html