下面HarmonyOS Next瀑布流触底加载更多代码如何优化解决卡顿问题？

Question

build() {
  Column({ space: 2 }) {
    WaterFlow() {
      LazyForEach(this.dataSource, (item: number) => {
        FlowItem() {
          // ...
        }
        .onAppear(() => {
          // 即将触底时提前增加数据
          if (item + 20 === this.dataSource.totalCount()) {
            //  模拟网络获取数据引起的耗时，
            this.mockRequestData().then((data: Item[]) => {
              for (let i = 0; i < data.length; i++) {
                this.dataSource.addLastItem();
              }
            })
          }
        })
        // ...
      }, (item: string) => item)
    }
    // ...
  }
}

async mockRequestData(): Promise<Item[]> {
  let res: ResponseData = new ResponseData();
  // data.json是存在本地的json数据，大小大约20M,模拟从网络端获取数据
  await getContext().resourceManager.getRawFileContent('data.json').then((data: Uint8Array) => {
    // 解析json
    let str = buffer.from(data).toString();
    res = JSON.parse(str);
  })
  return dataToItem(res.data);
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在主线程中出现了大块的耗时，直接导致用户在滑动的时候能感受到明显的卡顿。异步回调函数最后也由主线程执行，所以应该尽量避免在回调函数中执行耗时操作。可以使用系统自带的TaskPool多线程能力，将耗时任务交由子线程执行，避免主线程的长时间阻塞，以下为使用TaskPool优化后的代码：

build() {
  Column({ space: 2 }) {
    WaterFlow() {
      LazyForEach(this.dataSource, (item: number) => {
        FlowItem() {
          // ...
        }
        .onAppear(() => {
          // 即将触底时提前增加数据
          if (item + 20 === this.dataSource.totalCount()) {
            //模拟网络获取数据引起的耗时，
            taskPoolExecute().then((data: Item[]) => {
              for (let i = 0; i < data.length; i++) {
                this.dataSource.addLastItem();
              }
            })
          }
        })
        // ...
      }, (item: string) => item)
    }
    // ...
  }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。