【鸿蒙OH实战开发】性能优化之Swiper高性能开发

---

📚往期笔录记录✏️：

✏️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

✏️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

✏️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

✏️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

✏️ 记录一场鸿蒙开发岗位面试经历~

✏️ 持续更新中……

---

概述

在应用开发中，Swiper组件常用于翻页场景，比如：桌面、图库等应用。Swiper组件滑动切换页面时，基于按需加载原则通常会在下一个页面将要显示时才对该页面进行加载和布局绘制。针对复杂页面场景，该过程可能会持续较长时间，导致滑动过程中出现卡顿，对滑动体验造成负面影响，甚至成为整个应用的性能瓶颈。

本文主要介绍Swiper性能优化的相关方法。

懒加载

原理介绍

懒加载LazyForEach从提供的数据源按需迭代数据，并在每次迭代过程中创建相应的组件，Swiper采用LazyForEach进行数据懒加载，在布局时会根据可视区域按需创建Swiper子组件，并在Swiper子组件滑出可视区域外时销毁以降低内存占用。Swiper组件的开发，属于滑动容器加载的一种场景。

场景案例

为了体现Swiper使用ForEach与LazyForEach加载的性能差距，本地模拟答题场景进行测试分析。

Swiper子组件核心代码如下

@Component
struct SwiperItem {
  //题干
  private questionStr: string = '';
  //题目相关的图片资源
  private image: string | PixelMap = '';
  //答案选项
  private answerStr: string[] = [];
  //当前题号
  private myIndex: number = 0;

  //构造数据
  aboutToAppear(): void {
    // 初始化题干、图片链接、答案选项
    // ... 
  }

  build() {
    Column() {
      // 题干
      Text(this.questionStr)
        .fontSize(26)
        .width('100%')
      // 题目相关图片
      Image(this.image)
        .width('100%')
        .objectFit(ImageFit.Contain)
        .margin({ top: 12, bottom: 12 }