瀑布流加载丢帧优化

build() {
  Column({ space: 2 }) {
    // eslint-disable-next-line @performance/waterflow-data-preload-check
    WaterFlow({ footer: this.itemFoot() }) {
      LazyForEach(this.dataSource, (item: number) => {
        FlowItem() {
          // eslint-disable-next-line @performance/hp-arkui-use-reusable-component
          Column() {
            Text('N' + item).fontSize(NUM_12).height('16');
            Image('res/waterFlowTest(' + item % NUM_5 + ').jpg')
              .objectFit(ImageFit.Fill)
              .width('100%')
              .layoutWeight(NUM_1);
          };
        }
        .width('100%')
        .height(this.itemHeightArray[item % NUM_100])
        .backgroundColor(this.colors[item % NUM_5]);
      }, (item: string) => item);
    }
    .cachedCount(NUM_2)
    .columnsTemplate('1fr 1fr')
    .columnsGap(NUM_10)
    .rowsGap(NUM_5)
    .backgroundColor(COLOR_BACKGROUND)
    .width('100%')
    .height('100%');
  };
}

在实际开发中，瀑布流布局的数据不会一次性全部加载，而是每次加载固定数量的数据。当应用滑动时，会继续加载数据。在滑动过程中加载新数据时，结合懒加载和缓存列表项，可以确保缓存中的数据及时补充，从而用户在滑动时不会感觉到数据加载，实现无限滑动的效果（具体效果参见实践总结章节）。由于数据提前加载，避免了在同一时刻创建大量组件，减少了丢帧的情况。

在对应场景下，需通过事件加载数据以实现无限滑动。例如：使用瀑布流触底方法onReachEnd()和瀑布流组件滑动索引变化方法onScrollIndex()。

• 在onReachEnd()方法中加载数据时，应用会在数据源中的所有数据渲染完毕后加载新数据。这会导致明显的加载动画出现，用户需要等待新数据加载完成才能继续浏览瀑布流。
• 在onScrollIndex()方法中加载数据时，当瀑布流组件滑动导致可视区索引变化时，需要限制加载数据的条件。例如，当当前可视区最后一个组件的索引加20等于数据源数量时，才加载数据。这样可以避免每次索引变化时都加载数据。建议在onScrollIndex()方法中进行操作，使瀑布流在未到达底部时就开始加载数据，从而提升用户体验，使用户感知不到数据加载过程。

相关流程如下：

瀑布流组件加载流程图

示例如下：

WaterFlow({ footer: this.footStyle, scroller: this.waterFlowScroller }) {
  LazyForEach(this.waterFlowListData.getData(), (item: WaterFlowData, index: number) => {
    FlowItem() {
      // ...
    }
    .height(item.waterFlowHead.height / item.waterFlowHead.width * this.waterFlowItemWidth +
    this.getTitleHeight(item.waterFlowDescription.title))
    .backgroundColor(Color.White)
    // ...
  }, (item: WaterFlowData) => {
    return item.waterFlowDescription.index.toString();
  });
}
.edgeEffect(EdgeEffect.Spring)
.flingSpeedLimit(SPEED_LIMIT)
.onReachEnd(() => {
  if (this.netConnectState === NetConnectionState.FAIL_STATE) {
    this.getUIContext().getPromptAction().showToast({
      message: $r('app.string.net_connection_description'),
      bottom: CommonConstants.TOAST_SHOW_MARGIN_BOTTOM,
      duration: CommonConstants.TOAST_SHOW_TIME
    });
  }
  if (this.waterFlowListData.dataSource.totalCount() < CommonConstants.WATER_FLOW_MAX_COUNT) {
    // There are only 500 analog data, so the limit here is pageNo less than 25
    this.pageNo = this.pageNo + NUM_1 > NUM_25 ? this.pageNo - NUM_24 : this.pageNo + NUM_1;
    this.waterFlowListData.addData(CommonConstants.MOCK_INTERFACE_WATER_FLOW_FILE_NAME, this.pageNo,
      this.pageSize);
  }
  this.listDataCount = this.waterFlowListData.dataSource.totalCount();
})

与长列表不同，瀑布流布局中各个卡片的高度是不同的，这就对瀑布流布局绘制提出了新的挑战。瀑布流的卡片高度是由瀑布流卡片自适应瀑布流的宽度得到的，因此卡片的高度无法直接指定。这就会使卡片渲染以后得到的高度与占位符的高度不一致，从而造成卡片的闪烁效果。

固定宽高后，UI描述时可指定组件宽高。组件宽高固定时，布局阶段不参与测量，节点保存大小信息。瀑布流内容多时，避免整体测算，性能提升。

Image组件异步加载，提前设定FlowItem高度，避免图片加载后高度变化触发布局刷新。

详细内容请参考：利用布局边界减少布局计算。

如上图所示，两列瀑布流卡片的宽度 = （屏幕宽度 - 2 * 组件外边距（margin） - 瀑布流组件内边距（gap））/ 2。

瀑布流卡片中图片的高度imageHeight = 图片原始高度 / 图片原始宽度 * 瀑布流卡片宽度。

瀑布流卡片中描述性的高度titleHeight根据标题长度不同需设置不同的高度，其计算逻辑如下代码所示：

getTitleHeight(title: string): number {
  let textWidth: number = this.getUIContext().getMeasureUtils().measureText({
    textContent: title,
    fontSize: 14
  });
  return textWidth > (this.waterFlowItemWidth - CommonConstants.DESCRIPTION_MARGIN_LEFT * NUM_2) ?
    CommonConstants.DESCRIPTION_THREE_LINES_HEIGHT : CommonConstants.DESCRIPTION_TWO_LINES_HEIGHT;
}

瀑布流卡片的高度 = imageHeight + titleHeight。

本文通过瀑布流案例，使用部分优化手段，实现页面流畅滑动。页面包含SearchBar、Swiper、WaterFlow和底部导航栏。顶部功能区由Swiper嵌套Grid组件实现，瀑布流使用WaterFlow组件，FlowItem内容包括图文、视频、直播卡片，复用相同UI结构，避免无用层级嵌套。

整体效果图

下表为通过网络请求500条数据加载渲染，测试获得的数据（数据测试方式采用技术从左向右累加测试的）：

从测试结果可以看出，使用LazyForEach懒加载后，相关指标显著提升，尤其是在内存使用和首次渲染时间方面。其他优化方法可以进一步减少滑动过程中的丢帧率，从而优化交互体验。缓存数据项会影响首次渲染时间，因为缓存的数据未在首屏展示，但需要加载额外的数据，导致内存使用增加。由于UI组件的复用，内存使用显著减少。

对于瀑布流性能优化方式，与长列表优化类似，都可以使用懒加载、缓存列表项、动态预加载、组件复用、布局优化等方式优化性能。固定宽高作为瀑布流特有的优化性能手段能够进一步提升瀑布流的性能，同时可以避免新加载元素瞬间刷新带来的“闪烁”问题。在滑动过程中加载数据，可以避免同一时间创建大量组件而导致丢帧的情况。相应技术总结见下表：

• 优化瀑布流加载慢丢帧问题