事出有因——为什么要做Flutter性能监控

移动端APM其实已经是一个很成熟的命题了，在Native世界这些年的发展中，曾经诞生过很多用于监控线上性能数据的SDK。但是由于Flutter相对于Native做了很多革命性的改变，导致Native的性能监控在Flutter页面上基本全部失效了。基于这个背景，我们在去年启动了名为Flutter高可用SDK的项目，目的是让Flutter页面像Native页面一样可以被度量。

有的放矢——我们需要一个怎样的SDK

性能监控既然是一个成熟的命题，那么意味着我们有着充足的资源可以借鉴。我们借鉴了包括手淘的EMAS高可用、微信的Martix、美团的Hertz等性能监控SDK，并结合Flutter的实际情况我们确定了两个问题，一个是需要收集什么性能指标，一个是SDK需要有什么特性。

性能指标

1. 页面滑动流畅度：传统体现滑动流畅度主要是通过Fps，但是Fps有个问题是无法区分大量的轻微卡顿和少量的严重卡顿，但是对于用户来说显然体感差异是很大的，所以我们同时引入了Fps、滑动时长、掉帧时长来进行衡量是否流畅。

2. 页面加载耗时：页面加载耗时我们选了更能反映用户体感的可交互时长，可交互时长是指从用户点击发起路由跳转行为开始，到页面内容加载到可以发生交互结束的这一段时长。

3. Exception：这个指标应该不需要多做解释。

SDK特性

1. 准确性：准确性是一个性能监控SDK的基础要求，误报或者错报会导致开发者付出很多不必要的排查时间。

2. 线上监控：线上监控意味着收集数据时付出的代价不能太大，不能让监控影响到App原本的性能。

3. 易于拓展：作为一个开源项目，根本目标是希望大家都能参与进来为社区做贡献，所以SDK本身要易于拓展，同时需要一系列的规范来帮助大家进行开发。

见微知著——从单个指标看整体设计

2019年4月25日，我们曾经发表了一篇文章，讲述通过数据驱动Flutter体验升级，文章中详细介绍了Flutter的性能指标以及收集方式，大家可以去翻阅一下之前的文章快速复习一下学过的知识。我们这里就选择其中比较典型的收集瞬时Fps的实现来进行讲解，并通过这样的形式带大家看一下SDK整体的设计。

首先需要实现一个FpsRecorder，并继承自BaseRecorder。这个类的目的是为了获取到业务层中页面Pop/Push的时机以及FlutterBinding提供的页面开始渲染，结束渲染，发生点击事件的时机，并通过这些时机来计算出源数据。对于瞬时Fps来说源数据即为每帧时长。

                                
                                    
                                        class
                                             FpsRecorder 
                                                extends BaseRecorder
                                                     {
                                                        
                                                        
                                        
                                    
                                    
                                            
                                            ///...
                                                
                                                
                                                
                                        
                                    
                                    
                                          
                                            @override
                                                
                                                
                                                
                                        
                                    
                                    
                                          
                                            void onReceivedEvent(
                                                BaseEvent event
                                                    ) {
                                                        
                                                        
                                        
                                    
                                    
                                            
                                            if (
                                                event is
                                                     RouterEvent)
                                                         {
                                                            
                                                            
                                        
                                    
                                    
                                              
                                            ///...
                                                
                                                
                                                
                                        
                                    
                                    
                                            
                                            } else
                                                 if 
                                                    (event 
                                                        is RenderEvent
                                                            ) {
                                                                
                                                                
                                        
                                    
                                    
                                              
                                            switch (
                                                event.eventType
                                                    ) {
                                                        
                                                        
                                        
                                    
                                    
                                                
                                            case RenderEventType
                                                .beginFrame:
                                                    
                                                    
                                        
                                    
                                    
                                                  _frameStopwatch
                                            .reset();
                                                
                                                
                                        
                                    
                                    
                                                        _frameStopwatch
                                            .start();
                                                
                                                
                                        
                                    
                                    
                                                  
                                            break;
                                                
                                                
                                        
                                    
                                    
                                                
                                            case RenderEventType
                                                .endFrame:
                                                    
                                                    
                                        
                                    
                                    
                                                  _frameStopwatch
                                            .stop();
                                                
                                                
                                        
                                    
                                    
                                                  
                                            PerformanceDataCenter().push
                                                (FrameData(
                                                    _frameStopwatch.elapsedMicroseconds
                                                        ));
                                                            
                                                            
                                                            
                                        
                                    
                                    
                                                  
                                            break;
                                                
                                                
                                        
                                    
                                    
                                              
                                            }
                                                
                                                
                                                
                                        
                                    
                                    
                                            
                                            } else
                                                 if 
                                                    (event 
                                                        is UserInputEvent
                                                            ) {
                                                                
                                                                
                                        
                                    
                                    
                                              
                                            ///...
                                                
                                                
                                                
                                        
                                    
                                    
                                            
                                            }
                                                
                                                
                                                
                                        
                                    
                                    
                                          
                                            }
                                                
                                                
                                                
                                        
                                    
                                    
                                        
                                    
                                    
                                          
                                            @override
                                                
                                                
                                                
                                        
                                    
                                    
                                          
                                            List<Type
                                                > subscribedEventList() 
                                                    {
                                                        
                                                        
                                                        
                                        
                                    
                                    
                                            
                                            return <
                                                Type>[RenderEvent
                                                    , RouterEvent
                                                        , UserInputEvent
                                                            ];
                                                                
                                                                
                                                                
                                        
                                    
                                    
                                          
                                            }
                                                
                                                
                                                
                                        
                                    
                                    
                                        }

我们在beginFrame时打下开始点，在endFrame时打下结束点，即可得到每帧的时长。可以看到我们收集到了每帧时长后，将其封装为了一个 FrameData 并push到了PerformanceDataCenter中。PerformanceDataCenter会将该数据分发给订阅了FrameData的Processor中，所以我们需要新建一个FpsProcessor订阅并处理这些源数据。

class FpsProcessor extends BaseProcessor {
    ///...
  @override
  void process(BaseData data) {
    if (data is FrameData) {
      ///...
      if (isFinishedWithSample(currentTime)) {
        ///当时间间隔大于1s，则计算一次FPS
        _startSampleTime = currentTime;
        collectSample(currentTime);
      }
    }
  }
  @override
  List<Type> subscribedDataList() {
    return [FrameData];
  }
  void collectSample(int finishSampleTime) {
    ///...
    PerformanceDataCenter().push(FpsUploadData(avgFps: fps));
  }
  ///...
}

FpsProcessor将获取到的每帧时长收集起来并计算1s内的瞬时Fps值（具体的统计方法可以参考上文提到的前一篇文章的实现，这里不过多的进行描述）。同样的在计算完Fps值后，我们将其封装为了一个 FpsUploadData 并再一次push到了PerformanceDataCenter中。PerformanceDataCenter会将FpsUploadData交给订阅了它的Uploader进行处理，所以我们需要新建一个MyUploader订阅并处理这些数据。

class MyUploader extends BaseUploader {
  @override
  List<Type> subscribedDataList() {
    return <Type>[
      FpsUploadData, //TimeUploadData, ScrollUploadData, ExceptionUploadData,
    ];
  }
  @override
  void upload(BaseUploadData data) {
    if (data is FpsUploadData) {
      _sendFPS(data.pageInfoData.pageName, data.avgFps);
    }
    ///...
  }
}

Uploader可以通过 subscribedDataList() 选择需要订阅的UploadData，并通过 upload() 接收notify并进行上报。理论上一个Uploader对应一个上传渠道，使用者可以按需实现如LocalLogUploader、NetworkUploader等将数据上报到不同的地方。

纵观全局——整体结构设计

SDK总体可以分为4层，并大量的使用了发布-订阅模式利用2个Center进行连接，这种模式的好处在于可以使得层与层之间做到完全的解耦，使得对于数据的处理可以更加灵活多变。

API

这一层中主要是一些对外暴露的接口。比如init()需要使用者在runApp()前进行调用，以及业务层需要调用pushEvent()方法给SDK提供的一些时机。

Recorder

这一层的主要职责是用Evnet所提供的时机进行相应的源数据收集并交给订阅了该数据的Processor进行处理。比如FPS采集中的每帧时长即为源数据。这一层的设计主要是为了使得源数据可以被利用在不同的地方，比如每帧时长除了用于计算FPS，还可以用来计算卡顿秒数。

使用时需要继承BaseRecoder，通过 subscribedEventList() 选择订阅的Event，在 onReceivedEvent() 中处理接收到的Event

abstract class BaseRecorder with TimingObserver {
  BaseRecorder() {
    PerformanceEventCenter().subscribe(this, subscribedEventList());
  }
}
mixin TimingObserver {
  void onReceivedEvent(BaseEvent event);
  List<Type> subscribedEventList();

Processor

这一层主要是将源数据加工为最终可以被上报的数据，并交给订阅了该数据的Uploader进行上报。比如FPS采集中根据收集到的每帧时长进行计算，得到这一段时间内的FPS值。

使用时需要继承BaseProcessor，通过 subscribedDataList() 选择订阅的Data类型，在 process() 中对接收到的Data进行处理。

abstract class BaseProcessor{
  void process(BaseData data);
  List<Type> subscribedDataList();
  BaseProcessor(){
    PerformanceDataCenter().registerProcessor(this, subscribedDataList());
  }
}

Uploader

这一层主要是由使用者自己去实现，因为每一位使用者希望将数据上报到的地方都不一样，所以SDK内部会提供相应的基类，只需要跟随着基类的规范来写，即可获取到订阅的数据。

使用时需要继承BaseUploader，通过 subscribedDataList() 选择订阅的Data类型，在 upload() 中对接收到的UploadData进行处理。

abstract class BaseUploader{
  void upload(BaseUploadData data);
  List<Type> subscribedDataList();
  BaseUploader(){
    PerformanceDataCenter().registerUploader(this, subscribedDataList());
  }
}

PerformanceDataCenter

单例，用于接收BaseData（源数据）以及UploadData（加工后的数据），并将这些时机分发给订阅了他们的Processor和Uploader进行处理。

在BaseProcessor和BaseUploader的构造函数中，分别调用了PerformanceDataCenter的register方法进行订阅该操作会把对应的实例存在PerformanceDataCenter的两个Map中，这样的数据结构使得一个DataType可以对应多个订阅者。

final Map<Type, Set<BaseProcessor>> _processorMap = <Type, Set<BaseProcessor>>{};
final Map<Type, Set<BaseUploader>> _uploaderMap = <Type, Set<BaseUploader>>{};

如下方图中所示，当调用PerformanceDataCenter.push()方法push数据时，会根据Data的类型进行分发，交给所有订阅了该数据类型的Proceesor/Uploader。

PerforanceEventCenter

单例，设计思路和PerformanceDataCenter类似，但这里是用于接收业务层提供的Event（相应的时机），并将这些时机分发给订阅了他们的Recorder进行处理。Event的种类主要有：（其中业务状态需要使用者提供，其它时机SDK内部已经完成收集）

App状态：App前后台切换
页面状态：帧渲染开始、帧渲染结束
业务状态：页面发生Pop/Push、页面发生滑动、业务中发生Exception

见仁见智——SDK的打开方式

如果你是SDK的使用者，那么你只需要关注API层以及Uploader层，你只需要进行以下几步操作：

1. 在Pubspec中引用高可用SDK；

2. 在runApp()方法被调用前，调用init()方法将SDK初始化；

3. 在你的业务代码中，通过pushEvent()方法给SDK提供一些必要的时机，比如路由的Pop以及Push；

4. 自定义一个Uploader类，将数据以你希望的格式上报到你所使用的数据收集平台。

如果你希望能为高可用SDK贡献一份力量，那么希望你遵守以下几点设计规范并向我们提出Push Request，我们会及时进行Review并将反馈给到你。

1. 使用发布-订阅模式，发布者先将数据交给对应的数据中心，再由数据中心分发给相应的订阅者。

2. 数据流向从Recorder到Processor再到Uploader，通过数据进行驱动，API通过Event驱动Recorder，Recorder通过BaseData驱动Processor，Processor通过UploadData驱动Uploader。

脚踏实地——SDK的落地应用

我们已经对Flutter高可用SDK进行了多次数据准确度方面的调优，以及很多BadCase的解决，甚至进行过一次颠覆性的重构。至今，SDK已经在闲鱼内稳定运行了将近半年，从第一次接入至今从未出现过因为高可用SDK而引发的稳定性问题，数据收集的准确度也在进行了多次调优后趋近于稳定。

我们利用了手淘EMAS的后台数据处理以及前台数据展示的能力，将高可用SDK线上收集到的数据进行上报和展示，使得Flutter页面可以与Native页面同场竞技。

仰望星空——我们的征途是星辰大海

功能补充

目前SDK仍有两大问题社区中有需求但没有得到解决：

Flutter内存分析
卡顿时堆栈的抓取

我们会继续这方面的研究，同时也希望有想法的同学能加入我们并向我们提交代码。

开源计划

目前高可用SDK已经完成了集团内的开源，根据集团内同学接入时的反馈我们对文档进行补充和修改，但是仍然还不够全面，同时测试用例也在紧张的编写当中。在这些都完成之后我们将会进行开源，预计会在两个月内和大家见面。

闲鱼团队是Flutter+Dart FaaS前后端一体化新技术的行业领军者，就是现在！ 客户端／服务端java／架构／前端／质量工程师 面向社会招聘，base杭州阿里巴巴西溪园区，一起做有创想空间的社区产品、做深度顶级的开源项目，一起拓展技术边界成就极致！

*投喂简历给小闲鱼→guicai.gxy@alibaba-inc.com

更多系列文章、开源项目、关键洞察、深度解读

请认准 闲鱼技术