Flutter渲染优化之RepaintBoundary

发布时间:2024-04-15 内容来源:网络

前言

了解Flutter的同学应该都或多或少知道Flutter中的三棵树(Widget,Element,RenderObject),其中RenderObject负责绘制逻辑,RenderObject中的paint方法类似于Android中View的Draw方法

Flutter状态更新

Flutter中按有无状态更新可分为两类:StatelessWidget(无状态)和StatefulWidget(有状态),StatefulWidget中创建一个State,在State内部调用setState,等到下一次Vsycn信号过来就会重建更新状态了。

image-20211217101709970
Flutter的渲染流程

在Flutter三棵树中Widget和Element的节点是一一对应,而RenderObject是少于或等于Widget的数量的。当Widget是RenderObjectWidget的派生类的时候才有对应的RenderObject。Element和RenderObject在某些条件下是可以复用的,

Flutter渲染流程

渲染的耗时包括两部分

  • 构建流水线任务
  • 绘制逻辑

截屏2022-01-02 下午7.08.05.png

从上图可以看出Flutter绘制一帧的任务会先构建三棵树然后再去绘制,因为Element复用的原因所以页面刷新的时候Widget和Element的生命方法并不会重复调用(解决构建耗时性能问题),但是在不使用RepaintBoundary的情况下RenderObject中的paint方法会被频繁调用,接下来我们学习一下Flutter是怎么提升绘制性能的。

RepaintBoundary

RepaintBoundary是集继承 SingleChildRenderObjectWidget,也属于RenderObjectWidget的派生类,所以RepaintBoundary也会有对应的RenderObject。


RepaintBoundary中创建的RenderObject是RenderRepaintBoundary,下面是RenderRepaintBoundary的代码


isRepaintBoundary在RenderObject中默认是返回false,RenderRepaintBoundary中返回的是true

RenderObject中isRepaintBoundary的作用

当RenderObject中isRepaintBoundary返回时true时当前节点的RenderObject(以及子节点)的绘制会在新创建Layer完成,这样就和其他Layer做了隔离,因为Layer是可以复用的,这样帧刷新的时候就不需要把每个RenderObject的paint方法都执行一遍。关于Layer的介绍可参考 初识Flutter中的Layer,下面我们是看看isRepaintBoundary返回true时是怎么创建Layer的。

核心代码如下:


流程图如下:

image-20211230210645397

从上述流程可以看出当isRepaintBoundary=false时,就会触发paint的方法,我们假设下图所有RenderObject的isRepaintBoundary=false且其中RenderObject4被标记需要刷新

image-20211231162645386

RenderObject4会自下而上寻找自己的父亲节点,直到找到父节点为isRepaintBoundary=true为止,然后把父节点依次标记需要刷新(_needsPaint=true),如下图所示:

找到最顶层的父节点,然后执行paint方法,最终的结果就是遍历执行了所有RenderObject的paint方法,如下图所示:

image-20211231163719194

如果RenderObject4的上一级父节点就是isRepaintBoundary=true,那么流程就如下

image-20211231163947431

寻找父节点isRepaintBoundary=true

image-20211231164022854

如果RenderObject4被标记需要刷新,RenderObject1和RenderObject4需要执行paint方法:

image-20211231164209516

假如是RenderObject2,RenderObject3,RenderObject5,RenderObject6,RenderObject7中有一个需要刷新,右边标颜色的节点会执行paint方法

image-20211231170142507

综上流程分析,假设场景是RenderObject4的绘制很耗但是是刷新不频繁,RenderObject5,RenderObject6,RenderObject7的刷新很频繁,我们使用RepaintBoundary对RenderObject4对应的Widget包一层这样可以缩短渲染时绘制阶段的耗时从而降低卡顿问题。

使用到RepaintBoundary的地方

在Flutter framework中的有些Widget就使用到RepaintBoundary了

Flowl

流式布局每个child都是独立的layer渲染


RepaintBoundary中的源码:


SliverChildBuilderDelegate

SliverChildBuilderDelegate这个是ListView.builder的时候内部会创建SliverChildBuilderDelegate,列表大量item彼此之间独立layer渲染


总结

以上是对RepaintBoundary的作用分析,希望通过此篇文章帮助到大家提升的对Flutter渲染机制的认识。


平台注册入口