Flutter页面不流畅,难道是使用姿势有问题?

者|檀婷婷(三莅)

出品|阿里巴巴新零售淘系技术部

背景


高性能高流畅度一直是Flutter团队宣传的一大亮点,也是当初闲鱼选择Flutter的重要因素之一,但是随着复杂业务的应用落地,通过Flutter页面和原生页面滑动流畅度对比,我们开始产生怀疑,因为部分Flutter页面流畅度明显低于Native,是Flutter的宣传言过其实是我们开发人员使用姿势有问题,今天我们就来具体分析下。

Flutter渲染原理简介


优化之前我们先来介绍下Flutter的渲染原理,通过这部分基础了解渲染流程以及主要耗时花费。

Flutter视图树包含了三颗树:Widget、Element、RenderObject

  • Widget: 存放渲染内容、它只是一个配置数据结构,创建是非常轻量的,在页面刷新的过程中随时会重建

  • Element: 同时持有Widget和RenderObject,存放上下文信息,通过它来遍历视图树,支撑UI结构

  • RenderObject: 根据Widget的布局属性进行layout,paint ,负责真正的渲染

从创建到渲染的大体流程是:根据Widget生成Element,然后创建相应的RenderObject并关联到Element.renderObject属性上,最后再通过RenderObject来完成布局排列和绘制。

例如下面这段布局代码

Container(
      color: Colors.blue,
      child: Row(
        children: <Widget>[
Image.asset('image'),
Text('text'),
],
),
);

对应三棵树的结构如下图:

了解了这三棵树,我们再来看下页面刷新的时候具体做了哪些操作

当需要更新UI的时候,Framework 通知 Engine,Engine 会等到下个 Vsync 信号到达的时候,会通知 Framework 进行 animate, build,layout,paint,最后生成 layer 提交给 Engine。Engine 会把 layer 进行组合,生成纹理,最后通过 Open Gl 接口提交数据给 GPU, GPU 经过处理后在显示器上面显示,如下图:

结合前面的例子,如果text文本或者image内容发生变化会触发哪些操作呢?

Widget 是不可改变,需要重新创建一颗新树,build开始,然后对上一帧的element树做遍历,调用他的updateChild,看子节点类型跟之前是不是一样,不一样的话就把子节点扔掉,创造一个新的,一样的话就做内容更新,对renderObject做updateRenderObject操作,updateRenderObject内部实现会判断现在的节点跟上一帧是不是有改动,有改动才会别标记dirty,重新layout、paint,再生成新的layer交给GPU,流程如下图:

到这里大家对Flutter在渲染方面有基本的理解,作为后面优化部分内容理解的基础。

性能分析工具及方法


下面来看下性能分析工具,注意,统计性能数据一定要在真机+profile模式下运行,拿到最接近真实的体验数据。

performance overlay

平时常用的性能分析工具有performance overlay,通过他可以直观看到当前帧的耗时,但是他是UI线程和GPU线程分开展示的,UI Task Runner是Flutter Engine用于执行Dart root isolate代码,GPU Task Runner被用于执行设备GPU的相关调用。绿色的线表示当前帧,出现红色则表示耗时超过16.6ms,也就是发生丢帧现象。

Dart DevTool

另一个工具是Dart DevTool ,就是早期的Observatory,官方提供的性能检测工具。它的 timeline 界面可以让逐帧分析应用的 UI 性能。但是目前还是预览版,存在一些问题。

profile模式下运行起来,点击android studio底部的菜单按钮,会弹出一个网页。

点击顶部的 Timeline 菜单

这个时候滑动页面,每一帧的耗时会以柱形 bar 的形式显示在页面上,每条bar代表一个 frame,同时用不同颜色区分 UI/GPU 线程耗时,这个时候我们要分析卡顿的场景就需要选中一条红色的bar(总耗时超过16.6ms),中间区域的Frame events chart显示了当前选中的frame的事件跟踪,UI 和 GPU 事件是独立的事件流,但它们共享一个公共的时间轴。

选中Frame events chart中的某个事件,以上图为例Layout耗时最长,我们选中它,会在底部Flame chart区域显示一个自顶向下的堆栈跟踪,每个堆栈帧的宽度表示它消耗CPU的时长,消耗大量CPU时长的堆栈是我们首要分析的重点,后面就是具体分析堆栈,定位卡顿问题。

debug 调试工具

另外还有一些debug调试工具可以辅助查看更多信息,注意,只能在debug模式下使用分析,拿到的数据不能作为性能标准

debugProfileBuildsEnabled:向 Timeline 事件中添加每个widget的build 信息

debugProfilePaintsEnabled:向 timeline 事件中添加每个renderObject的paint 信息

debugPaintLayerBordersEnabled:每个layer会出现一个边框,帮助区分layer层级

debugPrintRebuildDirtyWidgets:打印标记为dirty的widgets

debugPrintLayouts:打印标记为dirty的renderObjects

debugPrintBeginFrameBanner/debugPrintEndFrameBanner:打印每帧开始和结束

实例分析

了解这些工具下面我们来看个简单的demo具体分析下,一个由Column、Container、ListView嵌套的布局,其中有个定时器控制Text中显示的文本实时更新

class TestDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
  return _TestDemoState();
}
}
class _TestDemoState extends State<TestDemo> {
int _count = 0;
Timer _timer;
...
@override
Widget build(BuildContext context) {
  return new Scaffold(
      appBar: new AppBar(
        title: new Text("Test Demo"),
      ),
      body: content()
  );
}
Widget content(){
  Widget result = Column(
    children: <Widget>[
      Container(...),
      Container(...),
      Container(...),
      Container(
          ...
          child: Center(
            child: Text(
              _count.toString(),
            ),)), ],
  );
  return result;
}
}

大部分 widget 都是静态的,只有黄色 Container 中包含一个内容一直刷新的 Text ,这个时候我们打开 debugProfileBuildsEnabled,用 Timeline 分析下它的渲染耗时,可以通过 Frame events chart 中显示的 build 层级非常深

结合第一部分渲染原理我们了解到,每次定时器刷新text数字的时候,整个页面widget树都会重新build,但其实只有最底层Container中的Text内容在改变,没有必要刷新整颗树,所以这里我们的优化方案是提高build效率,降低 Widget tree 遍历的出发点,将 setState 刷新数据尽量下发到底层节点,所以将 Text 单独抽取成独立的 Widget,setState 下发到抽取出的 Widget 内部

class _TestDemoState extends State<TestDemo> {
...
Widget content(){
  Widget result = Column(
    children: <Widget>[
      ...
      Container(
          ...
          child: Center(
            child:
                CountText()
          )),],
  );
  return result;
}
}
class CountText extends StatefulWidget {
@override
State<StatefulWidget> createState() {
  return _CountTextState();
}
}
class _CountTextState extends State<CountText> {
int _count = 0;
Timer _timer;
...
@override
Widget build(BuildContext context) {
  return Text(
    _count.toString(),
    style: TextStyle(fontSize: 18, fontWeight:FontWeight.bold),);
}
}

修改后的Timeline显示如下图:

build 层级明显减少,总耗时也明显降低。

接下来分析下 Paint 过程有没有可以优化的部分,我们打开 debugProfilePaintsEnabled 变量分析可以看到 Timeline 显示的 paint 层级

通过 debugPaintLayerBordersEnabled=true;显示layer边框可以看到不断变化的 Text 和其他 Widget 都是在同一个 layer 中的,这里我们想到的优化点是利用RepaintBoundary提高paint效率,它为经常发生显示变化的内容提供一个新的隔离layer,新的layer paint不会影响到其他layer。

RepaintBoundary(
          child: Container(
              margin: EdgeInsets.fromLTRB(10,20,10,10),
              height: 100,
              width: 350,
              color: Colors.yellow,
              child: Center(
                  child: CountText()
)
),
),

看下优化后的效果

可以看到我们为黄色的Container建立了单独的layer,并且paint的层级减少很多。

常见问题总结

  • 提高build效率,setState刷新数据尽量下发到底层节点

  • 提高paint效率,RepaintBoundry创建单独layer减少重绘区域

这两个我们之前的例子已经具体分析过

  • 减少build中逻辑处理,因为widget在页面刷新的过程中随时会通过build重建,build调用频繁,我们应该只处理跟UI相关的逻辑

  • 减少saveLayer(ShaderMask、ColorFilter、Text Overflow)、clipPath的使用,saveLayer会在GPU中分配一块新的绘图缓冲区,切换绘图目标,这个操作是在GPU中非常耗时的,clipPath会影响每个绘图指令,做相交操作,之外的部分剔除掉,所以这也是个耗时操作

  • 减少Opacity Widget 使用,尤其是在动画中,因为他会导致widget每一帧都会被重建,可以用 AnimatedOpacity 或 FadeInImage 进行代替

以上内容介绍了些Flutter常见的性能问题以及我们怎么用工具检测这个问题,在平时开发过程中要留意规避这类问题。

Flutter-DX案例分析


近期我们做了个Flutter端的动态化模板渲染方案Flutter-DX,它使用集团DinamicX的DSL,通过下发DSL模板,在Flutter侧实现动态解析渲染。具体介绍可以参考之前的文章:

《如何在Flutter上实现高性能的动态模板渲染》

《做一个高一致性、高性能的Flutter动态渲染,真的很难么?》

这里不再详细介绍。

尽管进行了一次渲染架构升级,很大程度上提升性能表现,但是通过高可用线上统计,发现在长列表场景下fps值没有达到预期值,所以需要进一步分析哪些操作导致的耗时问题。

以搜索页页面结构为例,外部是GridView的容器,里面都是一个个DX模板组成的宝贝card,滑动过程中发现流畅度要明显偏低

所以我们做了以下的优化措施

  • 针对Sliver滑动的优化,sliver在滑动过程中,有一个超出屏幕上下250像素的一个缓存区

在列表滚动过程中,DX card不断的被重建和销毁,没有任何缓存机制,我们在其中加了个缓存池,流程如下,避免element不断的被销毁和创建,一定程度提高流畅度。

  • 通过Timeline分析发现TextPaint的layout耗时显著,进一步对比分析发现,同样的UI显示,带换行符的长文本长度layout耗时明显偏高,

后来确认带换行符的文本会影响布局效率,具体分析可以查看 issue

这里我们做的优化措施是在判断只有一行文本显示的情况下,截取换行符前的内容作为text文本,从而提升TextPaint layout效率。

除此之外,还有一些减少布局层级和简化build流程,预加载缓存等措施,实现将FPS提升3个点,达到一定程度的优化效果。

总结


以上内容分析了flutter的渲染原理以及遇到卡顿问题可以用哪些工具从哪些方向入手分析,Flutter 虽然一直宣称流畅度是一大亮点,但也存在一定的优化空间,以及需要开发者掌握一定的开发技巧才能达到更丝滑的体验。

We are hiring

淘系技术部依托淘系丰富的业务形态和海量的用户,我们持续以技术驱动产品和商业创新,不断探索和衍生颠覆型互联网新技术,以更加智能、友好、普惠的科技深度重塑产业和用户体验,打造新商业。我们不断吸引用户增长、机器学习、视觉算法、音视频通信、数字媒体、移动技术、端侧智能等领域全球顶尖专业人才加入,让科技引领面向未来的商业创新和进步。

请投递简历至邮箱:[email protected]

END

更多好文

点击下方图片即可阅读

必看|阿里集团内如何进行Flutter体系化建设?

做一个高一致性、高性能的Flutter动态渲染,真的很难么?

版权声明:本文为Taobaojishu原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Taobaojishu/article/details/105697402

智能推荐

小程序基础与实战案例

小程序开发工具与基础 小程序开发准备: 申请小程序账号( appid ) 下载并安装微信开发者工具 具体步骤如下: 先进入 微信公众平台 ,下拉页面,把鼠标悬浮在小程序图标上 然后点击 小程序开发文档 照着里面给的步骤,就可以申请到小程序账号了。 然后就可以下载 开发者工具 了 下载完打开后的界面就是这个样子 下面让我们来新建一个小程序开发项目: 在AppID输入自己刚刚注册的AppID就可以,或...

VMware centOS7 下通过minikube部署Kubernetes

1、环境准备: VMware CentOS-7-x86_64 CPU:2*2core 内存:8G 宿主机和虚拟机需网络互通,虚拟机外网访问正常 Centos发行版版本查看:cat /etc/centos-release root用户操作 2、禁用swap分区 Kubernetes 1.8开始要求关闭系统的Swap,可暂时关闭或永久禁用, 使用 $ free -m 确认swap是否为开启状态 $ s...

逻辑回归与scikit-learn

欢迎关注本人的微信公众号AI_Engine LogisticRegression 算法原理 一句话概括:逻辑回归假设数据服从伯努利分布,通过极大化似然函数(损失函数)的方法,运用梯度下降或其他优化算法来求解参数,来达到将数据二分类的目的。 定义:逻辑回归(Logistic Regression)是一种用于解决二分类(0 or 1)问题的机器学习方法,用于估计某种事物的可能性(不是概率)。比如某用户...

指针OR数组?用他们来表达字符串又有何不同?

cocowy的编程之旅 在学习C语言的过程中我们经常可以看到或者听到这样一句话:数组其实等价于指针,例如: 在这里可以轻松的看出输出后他们的值相等,其实在计算机内存里面,p为本地变量,有着他自己的作用域。而指针变量q保存着这个数组的首地址,通过*号指向这个地址保存的变量值。 然而我们再看一个例子: 这个时候计算机报错,这是为什么呢? 其实原因很简单,指针说指向的这个字符串的地址是位于计算机代码段地...

广度搜索

广度搜索的基本使用方法 广度搜索不同于深度搜索,是一种一步一步进行的过程,每一个点只记录一遍。需要用到队列记录每一步可以走到的位置,找到目标位置输出步数即可。 用到的知识:结构体、队列 如图 首先我们需要定义一个结构体来存储每个遍历到的点和步数 广搜不会用到递归,所以可以直接在主函数里写,这里需要定义一个结构体队列 初始化队列并将起始点入列 遍历 完整代码...

猜你喜欢

NIO Socket 编程实现tcp通信入门(二)

1、NIO简介 NIO面向通道和缓冲区进行工作,数据总是从通道读取到缓冲区中,或者从缓冲区写入到通道中。可以双向传输数据,是同步非阻塞式IO。NIO还引入了选择器机制,从而实现了一个选择器监听多个底层通道,减少了线程并发数。用NIO实现socket的Tcp通信需要掌握下面三个知识点: Buffer 缓冲区 Channel 通道 Selector 选择器   2、java.nio.Buff...

[字节码系列]ObjectWeb ASM构建Method Monitor

      在前面的篇章中,我们看到Java Instrutment的强大能力,本篇,我们将介绍如何使用ObjectWeb ASM的字节码增强能力构建Method Monitor       1.什么是ObjectWeb ASM      ObjectWeb ...

Core Location 电子围栏:入门

原文:Geofencing with Core Location: Getting Started 作者:Andy Pereira 译者:kmyhy 更新说明:Andy Pereira 将本教程升级至 Xcode 9.3 和 Swift 4.1。 Geofencing 会在设备进入/离开指定的电子围栏时通知应用程序。它可以让你写出一些很酷的应用程序,当你从家里出来时触发通知,或者在附近出现最爱的商...

Android 圆角边框RoundRect原理

绘制圆角矩形的方法 该方法来自Canvas类,rect代表矩形,rx和ry分别代表形成圆角所需要的椭圆的x和y轴半径,那么rx和ry究竟如何形成圆角呢? 形成圆角的原理 矩形的四个圆角是分别生成的,以左上角的圆角为例: 首先通过rect绘制出矩形,然后以矩形的左上角定点为起点,分别向x和y轴平移rx和ry, 得到的点为中心,以rx和ry为x和y轴的半径绘制椭圆,椭圆的坐上半部分圆弧就是圆角了。如下...

Python 面向对像

整理至http://www.cnblogs.com/wupeiqi/p/4493506.html博客 一、创建类和对象      类就是一个模板,模板里可以包含多个函数,函数里实现一些功能 对象则是根据模板创建的实例,通过实例对象可以执行类中的函数 class是关键字,表示类 创建对象,类名称后加括号即可 ps:类中的函数第一个参数必须是self(详细见:类的三大特性...