【性能优化】Swiper高性能开发指导

HarmonyOS Next应用开发案例（持续更新中……）

HarmonyOS Next性能指导总览

本篇文章链接，请访问： https://gitee.com/harmonyos-cases/cases/blob/master/docs/performance/swiper_optimization.md

在应用开发中，Swiper 组件常用于翻页场景，比如：桌面、图库等应用。Swiper 组件滑动切换页面时，基于按需加载原则通常会在下一个页面将要显示时才对该页面进行加载和布局绘制，这个过程包括：

Swiper 共 5 页，当开发者设置了 cacheCount 属性为 1 且 loop 属性为 false 时，预加载的结果如下：

Swiper 共 5 页，当开发者设置了 cacheCount 属性为 1 且 loop 属性为 true 时，预加载的结果如下：

class MyDataSource implements IDataSource { // LazyForEach的数据源
  private list: number[] = [];
  constructor(list: number[]) {
    this.list = list;
  totalCount(): number {
    return this.list.length;
  getData(index: number): number {
    return this.list[index];
  registerDataChangeListener(_: DataChangeListener): void {
  unregisterDataChangeListener(): void {
@Component
struct SwiperChildPage { // Swiper的子组件
  @State arr: number[] = [];
  aboutToAppear(): void {
    for (let i = 1; i <= 100; i++) {
      this.arr.push(i);
  build() {
    Column() {
      List({ space: 20 }) {
        ForEach(this.arr, (index: number) => {
          ListItem() {
            Text(index.toString())
              .height('4.5%')
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .backgroundColor(0xFFFFFF)
          .border({ width: 2, color: Color.Green })
        }, (index: number) => index.toString());
      .height("95%")
      .width("95%")
      .border({ width: 3, color: Color.Red })
      .lanes({ minLength: 40, maxLength: 40 })
      .alignListItem(ListItemAlign.Start)
      .scrollBar(BarState.Off)
    }.width('100%').height('100%').padding({ top: 5 });
@Entry
@Preview
@Component
struct SwiperExample {
  private dataSrc: MyDataSource = new MyDataSource([]);
  aboutToAppear(): void {
    let list: Array<number> = []
    for (let i = 1; i <= 10; i++) {
      list.push(i);
    this.dataSrc = new MyDataSource(list);
  build() {
    Column({ space: 5 }) {
      Swiper() {
        LazyForEach(this.dataSrc, (_: number) => {
          SwiperChildPage();
        }, (item: number) => item.toString());
      .loop(false)
      .cachedCount(1) // 提前加载后一项的内容
      .indicator(true)
      .duration(100)
      .displayArrow({
        showBackground: true,
        isSidebarMiddle: true,
        backgroundSize: 40,
        backgroundColor: Color.Orange,
        arrowSize: 25,
        arrowColor: Color.Black
      }, false)
      .curve(Curve.Linear)
    }.width('100%')
    .margin({ top: 5 })
为了更好地体现 Swiper 预加载机制带来的性能优化效果，用例采用下列前置条件：




    

Swiper 的子组件为带有 100 个 ListItem 的 List 组件；
Swiper 组件共有 10 个 List 子组件。
在该场景下，使用 Swiper 预加载机制可以为每个翻页动作节省约40%的时间，同时保证翻页时不丢帧，保证翻页的流畅度。
由于组件构建和布局计算需要一定时间，cachedCount 的数量也不是设置得越大越好，过大的 cachedCount 可能会导致应用性能降低。当前 Swiper 组件滑动离手后的动效时间大约是 400ms，如果应用加载一个子组件的时间在 100ms~200ms 之间，为了在离手动效时间内完成组件的预加载，cachedCount 属性建议设置为 1 或 2，设置过大会导致主线程阻塞而产生卡顿。
那么方案可以继续优化，Swiper 组件有一个OnAnimationStart回调接口，切换动画开始时触发该回调。此时，主线程空闲，应用可以充分利用这段时间进行图片等资源的预加载，减少后续 cachedCount 范围内的节点预加载耗时。
Swiper 子组件页面代码如下：
在子组件首次构建（生命周期执行到aboutToAppear）时，先判断 dataSource 中该 index 的数据是否有数据，若无数据则先进行资源加载，再构建节点。若有数据，则直接构建节点即可。
import image from '@ohos.multimedia.image';
import { MyDataSource } from './Index'
@Component
export struct PhotoItem { //Swiper的子组件
  myIndex: number = 0;
  private dataSource: MyDataSource = new MyDataSource([]);
  context = getContext(this);
  @State imageContent: image.PixelMap | undefined = undefined;
  aboutToAppear(): void {
    console.info(`aboutToAppear` + this.myIndex);
    this.imageContent = this.dataSource.getData(this.myIndex)?.image;
    if (!this.imageContent) { // 先判断dataSource中该index的数据是否有数据，若无数据则先进行资源加载
      try {
        // 获取resourceManager资源管理器
        const resourceMgr = this.context.resourceManager;
        // 获取rawfile文件夹下item.jpg的ArrayBuffer
        let str = "item" + (this.myIndex + 1) + ".jpg";
        resourceMgr.getRawFileContent(str).then((value) => {
          // 创建imageSource
          const imageSource = image.createImageSource(value.buffer);
          imageSource.createPixelMap().then((value) => {
            console.log("aboutToAppear push" + this.myIndex)
            this.dataSource.addData(this.myIndex, { description: "" + this.myIndex, image: value })
            this.imageContent = value;
      } catch (err) {
        console.log("error code" + err);
  build() {
    Column() {
      Image(this.imageContent)
        .width("100%")
        .height("100%")
Swiper 主页面的代码如下：
import Curves from '@ohos.curves';
import { PhotoItem } from './PhotoItem'
import image from '@ohos.multimedia.image';
interface MyObject {
  description: string,
  image: image.PixelMap,
export class MyDataSource implements IDataSource {
  private list: MyObject[] = []
  constructor(list: MyObject[]) {
    this.list = list
  totalCount(): number {
    return this.list.length
  getData(index: number): MyObject {
    return this.list[index]
  registerDataChangeListener(listener: DataChangeListener): void {
  unregisterDataChangeListener(listener: DataChangeListener): void {
  addData(index: number, data: MyObject) {
    this.list[index] = data;
@Entry
@Component
struct Index {
  @State currentIndex: number = 0;
  cacheCount: number = 1
  swiperController: SwiperController = new SwiperController();
  private data: MyDataSource = new MyDataSource([]);
  context = getContext(this);
  aboutToAppear() {
    let list: MyObject[] = []
    for (let i = 0; i < 6; i++) {
      list.push({ description: "", image: this.data.getData(this.currentIndex)?.image })
    this.data = new MyDataSource(list)
  build() {
    Swiper(this.swiperController) {
      LazyForEach(this.data, (item: MyObject, index?: number) => {
        PhotoItem({
          myIndex: index,
          dataSource: this.data
    .cachedCount(this.cacheCount)
    .curve(Curves.interpolatingSpring(0, 1, 228, 30))
    .index(this.currentIndex)
    .indicator(true)
    .loop(false)
    // 在OnAnimationStart接口回调中进行预加载资源的操作
    .onAnimationStart((index: number, targetIndex: number) => {
      console.info("onAnimationStart " + index + " " + targetIndex);
      if (targetIndex !== index) {
        try {
          // 获取resourceManager资源管理器
          const resourceMgr = this.context.resourceManager;
          // 获取rawfile文件夹下item.jpg的ArrayBuffer
          let str = "item" + (targetIndex + this.cacheCount + 2) + ".jpg";
          resourceMgr.getRawFileContent(str).then((value) => {
            // 创建imageSource
            const imageSource = image.createImageSource(value.buffer);
            imageSource.createPixelMap().then((value) => {
              this.data.addData(targetIndex + this.cacheCount + 1, {
                description: "" + (targetIndex + this.cacheCount + 1),
                image: value
        } catch (err) {
          console.log("error code" + err);
    .width('100%')
    .height('100%')
Swiper 组件的预加载机制与 LazyForEach 结合使用，能够达到最佳优化效果。
预加载的 cachedCount 并非越大越好，需要结合单个子组件加载耗时来设置。假设一个子组件的加载耗时为 Nms，那么 cachedCount 推荐设置为小于 400/N。
如果应用有非常高的性能优化需求，Swiper 预加载机制可搭配 OnAnimationStart 接口回调使用，进一步提升预加载的效率。