flutter性能优化实践

知识点记录

  • 滚动列表,child不在可视区域内是不会paint的。
//class RenderSliverMultiBoxAdaptor
@override
  void paint(PaintingContext context, Offset offset) {
  ...
    while (child != null) {
...
      // If the child's visible interval (mainAxisDelta, mainAxisDelta + paintExtentOf(child))
      // does not intersect the paint extent interval (0, constraints.remainingPaintExtent), it's hidden.
      if (mainAxisDelta < constraints.remainingPaintExtent && mainAxisDelta + paintExtentOf(child) > 0)
        context.paintChild(child, childOffset);

      child = childAfter(child);
    }
  }
  • 内存压力监听。通过WidgetsBinding可以监听内存压力事件,从而进行内存清理操作
//class WidgetsBinding
void addObserver(WidgetsBindingObserver observer) => _observers.add(observer);
bool removeObserver(WidgetsBindingObserver observer) => _observers.remove(observer);

@override
  void handleMemoryPressure() {
    super.handleMemoryPressure();
    for (final WidgetsBindingObserver observer in _observers)
      observer.didHaveMemoryPressure();
  }

列表数据缓存和预加载

详情见:flutter 列表数据缓存和预加载

分帧layout和paint

dart pub

  • DelayBuildWidget控制builder返回的widget分帧创建。
  • DelayLayoutAndPaintWidget控制child的layout和paint分帧进行。
  • 如果isScrollalbeItem 参数为true,则通过Scrollable.recommendDeferredLoadingForContext(context)判断当前小部件是否滚动太快了,如果滚动太快则在下一帧再判断是否build、layou和paint

例如:假设多个DelayBuildWidget的buildManager相同,则每帧进行一个DelayBuildWidget的builder调用并显示builder返回的widget。 DelayLayoutAndPaintWidget的原理类似,不过分帧处理的是child的layout和paint。

使用该封装前后性能对比如下:

以下截图为列表按设定速度滚动得到的cpu、gpu图,由两图可以看出优化后cpu性能明显将一帧的高耗时分摊到多个帧上了


没优化的

使用分帧优化的

圆角图片

dart pub
不使用ClipRRect显示圆角图片,而是在ImageProvider中生成带圆角的图片在递交Image显示

用法

Image(
    image: RoundCornersImageProvider.asset(
        'assets/icon_round_corners.png',
        cornerRadius: 30,
        imageShowSize: Size(60, 60),
        cornerColor: Colors.yellow
    ),
    width: 60,
    height: 60,
),

相对于系统提供的ImageProvider增加的属性及其作用

///圆角,如果imageShowSize不为空,则通过计算使得以imageShowSize显示出来的图片圆角为cornerRadius,
  ///如果imageShowSize为空,而cacheImageWidth或者cacheImageHeight不为空,则将resize之后的图片圆角设置为cornerRadius
  ///如果imageShowSize、cacheImageWidth、cacheImageHeight都为空,则将原图圆角设置为cornerRadius
  final int cornerRadius;
  //cornerRadius圆角外围部分的颜色,则被裁剪掉部分颜色
  final Color cornerColor;
  //ImageCache缓存图片的宽高设置
  final int cacheImageWidth;
  final int cacheImageHeight;

  //imageShowSize设置后裁取的位置
  //如果设置ClipLocation.Start,则当原始图片过长的时候从头部(上或左)截取宽高比为imageShowSize框高比的图片。
  final ClipLocation clipLocation;

  //图片显示的大小。如果设置了图片显示宽高,会按图片显示宽高比截取原图。圆角也会匹配imageShowSize
  final Size imageShowSize;

效果

以下截图gpu、cup数据为不断刷新页面得到的性能图。由两图对比可看出通过ImageProvider生成圆角图片可以提高cpu和gup性能


使用ClipRRect

ImageProvider生成圆角

自定义layout

如:文字左边显示与文字等高的竖线

普通做法为使用TextPainter先layou获取字体高度,在将高度设置给竖线。
此处可以通过自定义layout,在performLayout方法中先layout字体,然后得到高度,再使用字体高度进行竖线的layou。主要代码如下:
完整例子

///自定义Row的RenderObject的performLayout方法
@override
  void performLayout() {
    final BoxConstraints constraints = this.constraints;
    assert(constraints != null);

    WithIDRenderObject lineChild;
    WithIDRenderObject textChild;
    RenderBox child = firstChild;
    while (child != null) {
      if (child is WithIDRenderObject) {
        if (child.uid == 'line') {
          lineChild = child;
        } else if (child.uid == 'text') {
          textChild = child;
        }
      }
      final FlexParentData childParentData = child.parentData as FlexParentData;
      child = childParentData.nextSibling;
    }

    ///layout
    textChild.layout(BoxConstraints(maxWidth: constraints.maxWidth - 28), parentUsesSize: true);
    lineChild.layout(BoxConstraints(minWidth: 0, maxWidth: 28, maxHeight: textChild.size.height), parentUsesSize: true);

    ///设置this的size
    size = Size(constraints.maxWidth, textChild.size.height);

    ///设置child.parentData.offset
    final FlexParentData leftChildParentData = lineChild.parentData as FlexParentData;
    leftChildParentData.offset = Offset(0, 0);
    final FlexParentData rightChildParentData = textChild.parentData as FlexParentData;
    rightChildParentData.offset = Offset(lineChild.size.width, 0);
  }

注:CustomMultiChildLayout不能根据子控件大小设置父控件大小,所以不用。