走近科学,探究阿里闲鱼团队通过数据提升Flutter体验的真相

背景

闲鱼客户端的Flutter页面已经服务上亿级用户,因此用户体验尤其重要,完善Flutter性能稳定性监控体系,以便及早发现线上性能问题,也可以作为用户体验提升的衡量标准。

那么Flutter的性能到底如何,是否像官方宣传的那么丝滑?Native的性能指标是否可以用来检测Flutter页面?下面给大家分享我们在实践中总结出来的Flutter的性能稳定性监控方案。

目标

过度的丢帧从视觉上会出现卡顿现象,体现在用户滑动操作不流畅;页面加载耗时过长容易中断操作流程;Flutter部分exception会导致发生异常代码后面的逻辑没有走到从而造成逻辑bug甚至白屏。这些问题很容易考验用户耐心,引起用户反感。

所以我们制定以下三个指标作为线上Flutter性能稳定性标准:

  1. 页面滑动流畅度
  2. 页面加载耗时(首屏时长+可交互时长)
  3. Exception率

最终目标是让这些数据指标驱动Flutter用户体验升级。

页面滑动流畅度

我们先大概了解下屏幕渲染流程:CPU先把UI对象转变GPU可以识别的信息存储进displaylist列表,GPU执行绘图指令来执行displaylist,取出相应的图元信息,进行栅格化渲染,显示到屏幕上,这样一个循环的过程实现屏幕刷新。

闲鱼客户端采用的Native、Flutter混合技术方案,Native页面FPS监控采用集团高可用方案,Flutter页面是否可以直接采用这套方案监控?

普遍的FPS检测方案Android端采用的是Choreographer.FrameCallBack,IOS采用的是CADisplayLink注册的回调,原理是类似的,在每次发出Vsync信号,并且CPU开始计算的时候执行到对应的回调,这个时候表示屏幕开始一次刷新,计算固定时间内屏幕渲染次数来得到fps。(这种方式只能检测到CPU卡顿,对于GPU的卡顿是无法监控到的)。由于这两种方法都是在主线程做检测处理,而Flutter的屏幕绘制是在UI TaskRunner中进行,真正的渲染操作是在GPU TaskRunner中,关于详细的Flutter线程问题可以参考闲鱼之前的文章:深入理解Flutter引擎线程模式。

这里我们得出结论:Native的FPS检测方法并不适用于Flutter。

Flutter官方给我们提供了 Performance Overlay (具体参考 Flutter performance profiling) 作为检测帧率工具,可否直接拿来用?

上图显示了Performance Overlay模式下的帧率统计,可以看到,Flutter分开计算GPU 和UI TaskRunner。UI Task Runner被Flutter Engine用于执行Dart root isolate代码,GPU Task Runner被用于执行设备GPU的相关调用。通过对Flutter engine源码分析,UI frame time是执行window.onBeginFrame所花费的总时间。GPU frame time是处理CPU命令转换为GPU命令并发送给GPU所花费的时间。

这种方式只能在debug和profile模式下开启,没有办法作为线上版本的fps统计。但是我们可以通过这种方式获得启发,通过监听Flutter页面刷新回调方法handleBeginFrame()、handleDrawFrame()来计算实际FPS。

01具体实现方式

注册WidgetsFlutterBinding监听页面刷新回调handleBeginFrame()、handleDrawFrame()

handleBeginFrame: Called by the engine to prepare the framework to produce a new frame.
handleDrawFrame: Called by the engine to produce a new frame.

通过计算handleBeginFrame和handleDrawFrame之间的时间间隔计算帧率,主要流程如下图:

02效果

到这里,我们完成Flutter中页面帧率的统计,这种方式统计的是UI TaskRunner中的CPU操作耗时,GPU操作在Flutter引擎内部实现,要修改引擎来监控完整的渲染耗时,我们目前大部分的场景没有复杂到gpu卡顿,问题主要还是集中在CPU,所以说可以反应出大部分问题。从线上数据来看,release模式下Flutter的流畅度还是蛮不错的,ios的主要页面均值基本维持在50fps以上,android相对ios略低。这里需要注意的是帧率的均值fps在反复滑动过程中会有一个稀释效果,导致一些卡顿问题没有暴露出来,所以除了fps均值,需要综合掉帧范围、卡顿秒数、滑动时长等数据才能反应出页面流畅度情况。

页面加载时长

01Native和Weex页面加载算法对比

集团内部高可用方案统计Native页面加载时长是通过容器初始化后开启定时器在容器layout的时候检查屏幕渲染程度,计算可见组件的屏幕覆盖率,满足条件水平>60%,垂直>80%以上认为满足页面填充程度,再检查主线程心跳判断是否加载完成。

再来看看weex页面加载流程和统计数据的定义,

Weex的页面刷新稳定定义:屏幕内view渲染完成且view树稳定的时间。

具体实现:当屏幕内发生view的add/rm操作时,认为是可交互点,记录数据。直到没有再发生为止。

在概念上Flutter和weex的首屏时长和可交互时长并不完全一致,Flutter之所以选择从路由跳转开始计算时长主要是因为这种计算方式更贴近用户体验,可以获取更多的问题信息,比如路由跳转的时长问题等。

02Flutter的具体实现

Flutter的可交互时长end点采用的算法与native一致,可见组件满足页面填充程度并且完成心跳检查的情况下任务可交互,另外对于一些比较空的页面,组件面积小,无法达到水平>60%,垂直>80%的条件,就用交互前最后一次Frame刷新时间点作为end点。

具体流程如下图:

03效果

由于debug模式采用的JIT编译,debug模式下体验加载时长偏长,但是release模式下的AOT编译时长明显缩短很多,整体页面加载时长还是要优于weex。Exception率

Flutter部分exception/error 会导致代码后面的逻辑没有走到造成页面或逻辑bug,所以Flutter的exception需要作为稳定性的标准之一。

01定义

FlutterException率 = exception发生次数 / Flutter页面PV

分子:exception发生次数(已过滤掉白名单)

分母:Flutter页面PV

具体实现如下:

Future<Null> main() async {  FlutterError.onError = (FlutterErrorDetails details) async {    Zone.current.handleUncaughtError(details.exception, details.stack);  };
 runZoned<Future<Null>>(() async {    runApp(new HomeApp());  }, onError: (error, stackTrace) async {    await _reportError(error, stackTrace);  });}

其中,FlutterError.onError只会捕获Flutter framework层的error和exception,官方建议将这个方法按照自己的exception捕获上报需求定制。在实践过程中,我们遇到很多不会对用户体验产生任何影响的exception会被频繁触发,这类没有改善意义的exception可以添加白名单过滤上报。

02效果

有了线上exception的监控,可以及早发现隐患,获取问题堆栈信息,方便定位bug,提示整体稳定性。

总结

到这里,我们完成Flutter页面滑动流畅度、页面加载时长和Exception率的统计,对于Flutter的性能有一个具体的数字化标准,对以后的用户体验提升和性能问题排查提供基础。目前闲鱼客户端的商品详情页和主发布页已经全量Flutter化,感兴趣的同学可以体验下这两个页面和其他页面的性能差异,最后欢迎大家提供反馈和建议。

Image placeholder
donlian
未设置
  37人点赞

没有讨论,发表一下自己的看法吧

推荐文章
基于JS的高性能Flutter动态化框架MXFlutter

导语:18年10月份,手机QQ看点团队尝试使用Flutter,做为iOS开发,一接触到Flutter就马上感受到,Flutter虽然强大,但不能像RN一样动态化是阻碍我们使用她的唯一障碍了。看Goog

上万条数据撕开微博热搜的真相!

作者:徐麟,某互联网公司数据分析狮,个人公众号数据森麟(id:shujusenlin)吃瓜前言关于新浪微博,向来都是各路吃瓜群众聚集之地,大家在微博中可以尽情吃瓜,各种类型的瓜应有尽有,只有你想不到的

Flutter高内聚组件怎么做?闲鱼打造开源高效方案!

fish_redux是闲鱼技术团队打造的开源flutter应用开发框架,旨在解决页面内组件间的高内聚、低耦合问题。开源地址:https://github.com/alibaba/fish-redux从

闲鱼Flutter互动引擎系列——整体设计篇

什么是Candy引擎Candy引擎是闲鱼技术团队设计开发的一款:APP嵌入式的、轻量级的、易于开发、性能稳定的互动引擎;绘制系统高度融合Flutter体系,游戏场景和FlutterUI支持无缝混排;动

Flutter路由项目实战之fluro

github:https://github.com/zhengzhuan...关于flutter路由,在小项目中,就按照原生写法,但是在大型项目中,这样的我就不会进行推荐,我这里使用的fluro路由管

到2022年,全球客户体验的支出将达到6410亿美元

根据IDC最新发布的《全球半年度客户体验支出指南》报告显示,2019年全球客户体验(CX)技术支出总额将达到5080亿美元,比2018年增长了7.9%。由于公司专注于满足客户的期望并提供差异化的客户体

树莓派 4 正式发布!硬件性能大提升:CPU提升3倍,支持USB3.0、蓝牙5.0、千兆以太网、4G LPDDR4、H.265

本文转自|EETOP树莓派(RaspberryPi)基金会,6月24日正式发布了RaspberryPi4ModelB。树莓派是全球知名的基本计算微型电脑,深受全球开发者、编程者、极客等人士的追捧和喜爱

媒体开放日,探秘百分点认知智能战略!

2009年7月1日,数据智能技术公司百分点正式成立,今年正好是第10个年头。百分点公司新址10年间,百分点经过多次转型,逐步形成了目前的企业级(ToB)、政府级(ToG)和SaaS服务三大业务体系,服

使用phpStudy小皮面板,typecho的POST数据提交无反应问题

在安装typecho的过程中,遇到提交数据无反应,页面不报错的问题,十分迷惑。刚开始以为是centos系统文件夹权限问题,反复修改权限都无法解决问题。最后发现是,小皮面板默认开启的防火墙问题,直接关闭

跨平台开发的救星-让我们来了解一下flutter

第一次看文章的朋友可以关注我,会不定期发布Android面试内容、进阶专题等等。简介很多人已经用上了flutter,今天就来介绍一下Flutter架构Flutter框架分三层 Framework,En

揭秘!一个高准确率的Flutter埋点框架如何设计

背景用户行为埋点是用来记录用户在操作时的一系列行为,也是业务做判断的核心数据依据,如果缺失或者不准确将会给业务带来不可恢复的损失。闲鱼将业务代码从Native迁移到Flutter上过程中,发现原先Na

重磅|庖丁解牛之——Flutter for Web

Flutterfor Web在2018年冬的Flutter1.0伦敦发布会上,Flutter产品经理TimSneath通过一个滑动拼图的例子介绍了如何让Flutter运行在Web之上。这一当时代号Hu

Flutter环境搭建记录

1.下载安装包之后执行flutterdoctor报错:zsh:commandnotfound:flutter下载的是源码,去这里下载SDK 2.执行flutterdoctor,按照提示升级xcode、

两年Flink迁移之路:从standalone到on yarn,处理能力提升五倍

一、背景与痛点在2017年上半年以前,TalkingData的AppAnalytics和GameAnalytics两个产品,流式框架使用的是自研的td-etl-framework。该框架降低了开发流式

阿里提出针对多目标优化的全新算法框架,同时提升电商推荐场景 GMV 和 CTR

在推荐系统中,多目标优化一直是热门话题,阿里巴巴的XiaoLin、HongjieChen等人针对推荐中的多目标优化问题提出了一种基于帕累托效率的优化算法框架,并应用在电商推荐场景中,对GMV和CTR

HDFS 源码解读:HadoopRPC 实现细节的探究

桔妹导读:HDSF作为分布式文件系统,常常涉及DataNode、NameNode、Client之间的配合、相互调用才能完成完整的流程。为了降低节点之间的耦合性,HDFS将节点间的调用抽象成不同的接口,

深入探究 RocketMQ 事务机制的实现流程,为什么它能做到发送消息零丢失?

1、解决消息丢失的第一个问题:订单系统推送消息领丢失既然我们已经明确了消息在基于MQ传输的过程中可能丢失的几个地方,那么我们接着就得一步一步考虑如何去解决各个环节丢失消息的问题,首先要解决的第一个问题

看!闲鱼在ServiceMesh的探索和实践

背景在阿里服务端开发以Java为主的大背景下,其他异构语言业务如何调用现有Java服务,如何与集团中间件打通,就成为使用非Java语言团队必须要解决的首要问题。现状在ServiceMesh方案成熟之前

Oracle/云MySQL/MsSQL“大迁移”真相及最优方案

最近一段时间碰到一些数据迁移的项目,如:Oracle迁移到MySQL,MsSQL迁移到MySQL,云MySQL迁移到本地MySQL。对于这方面做了系统的整理。包括:迁移方案的选择、如何跳出迁移遇到的坑

一个多业务、多状态、多操作的交易链路?闲鱼架构这样演进

前言双十一刚刚结束,成交额2684亿震惊全世界,每秒订单峰值达54.4W笔。在闲鱼2000万DAU,交易数额同样增长迅速的今天,我们如何保障交易链路的稳定与快速支撑业务?这篇文章从客户端开发的角度,介

揭秘!闲鱼拉新投放系统如何设计

背景闲鱼目前已经是国内最大的闲置物品交易平台。随着闲鱼体量的增长和用户规模不断扩大,闲鱼App上的一个普通banner抑或是feeds中的一张普通的卡片,每天都可能被数以千万计的人看到。为了更好地服务

我在华为做外包的真实经历!

一个爱钱如命,又有所不为的人。1写在前面我将用系列文章,回顾十年程序生涯,一方面是对职场生涯的阶段性总结,另一方面希望这些经历,对大家往后职场生涯有所启发。我很庆幸一路走来皆是自己的选择,虽然也走了不

闲鱼如何高效承接并处理用户纠纷

背景闲鱼是一个基于C2C场景的闲置交易平台,每个用户既是买家也是卖家,在自由享受交易乐趣的同时也容易带来一些问题,如发一些侵权违规商品而不自知,发一些带情绪化言语对他人造成了伤害等,因此这也带来了一个

你的公司是需要数据科学家还是数据工程师?差别有点大

越来越多的企业关注AI,企业组织也意识到拥有相关人才和技能非常重要。特别是最近对AI、机器学习(ML)、非ML预测分析和“大数据”的应用,使得数据科学家的需求有了显著的增长,未来还将继续。事实上,对数

美漂数据科学家年薪多少?爬了6年H1B签证数据发现,招的人多了,但钱少了

大数据文摘出品来源:medium编译:张睿毅、曹培信自2012年起,一直被称为“最性感的工作”的数据科学家职位,吸引了大批远渡重洋到达硅谷,做着“数据梦”的留学生们。但他们也付出了不菲的前期投入,除了