Swiper高性能开发 原创

一、使用时遇到的问题

在应用开发的过程里，Swiper 组件常常会被应用于翻页场景当中，像桌面、图库这类应用就是常见的例子。当 Swiper 组件通过滑动来切换页面的时候，按照按需加载的原则，一般都是等到下一个页面即将要显示出来的时候，才会对这个页面展开加载以及布局绘制的相关操作，具体的操作流程包含以下这些方面：

倘若该页面运用了被 @Component 装饰的自定义组件，那么这个自定义组件的 build 函数便会得到执行，进而创建出内部的 UI 组件；

要是使用了 LazyForEach，就会执行 LazyForEach 的 UI 生成函数来生成 UI 组件；

而在 UI 组件构建完毕之后，还会针对 UI 组件开展布局测算以及绘制工作。

在面对复杂页面场景的时候，上述这个过程有可能会持续比较长的时间，如此一来，在滑动的过程中就容易出现卡顿的情况，这对滑动体验会产生负面的影响，甚至有可能成为整个应用在性能方面的瓶颈所在。例如在图库进行大图浏览的场景中，如果不采用预加载机制，每一次都会在滑动开始的首帧才去加载下一张图片，这样就会使得首帧耗时太久，甚至出现掉帧的现象，从而拖慢整个应用的性能。

二、解决方案

为了有效解决上述所提到的这些问题，我们可以借助 Swiper 组件的预加载机制，利用主线程的空闲时间，提前对组件进行构建以及布局绘制等操作，以此来优化滑动的体验。

使用场景如下：

当开发者所面临的应用场景属于加载耗时较长的情况时，特别是处于以下这些场景之中，那么建议使用 Swiper 预加载功能。

其一，当 Swiper 的子组件数量大于等于五个的时候；

其二，倘若 Swiper 的子组件具备较为复杂的动画时；

其三，要是 Swiper 的子组件在加载时需要执行诸如网络请求这类比较耗时的操作时；

其四，若 Swiper 的子组件包含有大量需要进行渲染的图像或者资源时。

三、预加载机制的说明

预加载机制算得上是 Swiper 组件里一项极为重要的特性了，它能够让 Swiper 在滑动到下一个子组件之前，就提前把后续页面的内容加载好，而其最主要的目的就是为了提升应用在滑动过程中的流畅性以及响应速度。

当用户想要滑动到下一个子组件的时候，要是下一个子组件的内容早已提前加载完成了，那么滑动操作马上就能进行；但要是下一个子组件的内容还没加载好，那么 Swiper 组件就需要在加载这个子组件的同时去处理滑动这一事件，如此一来，便会给滑动体验带来不好的影响。

目前，Swiper 组件的预加载是在用户滑动离手动效开始的时候被触发的，而离手动效的计算是在渲染线程中开展的，正因为这样，主线程就会有空闲的时间用来执行预加载相关的操作了。再配合上 LazyForEach 的按需加载以及销毁的能力，就可以在优化滑动体验的基础上，进一步节省内存的占用情况了。

四、代码实现

配置swiper的cacheCount属性

（1）当开发者设置了 cacheCount 属性为 1 且 loop 属性为 false 时，会预加载出当前item的下一个item

（2）当开发者设置了 cacheCount 属性为 1 且 loop 属性为 true 时，会预加载当前Item的上一个和下一个Item

当然cachedCount 的数量也不是设置得越大越好过大的 cachedCount 可能会导致应用性能降低。

（3）Item进行切换动画开始时会回调OnAnimationStart接口，在此回调中可以进行资源的加载，可以有效减少后续 cachedCount 范围内的节点预加载耗时

  private data: MyDataSource = new MyDataSource([]);
  
  Swiper(this.swiperController) {
      LazyForEach(this.data, (item: MyObject, index?: number) => {
        PhotoItem({
          myIndex: index,
          dataSource: this.data
        })
      })
    }
    .loop(false)
     .cachedCount(1)//预加载数量
     .onAnimationStart((index: number, targetIndex: number) => {
          if (targetIndex !== index) {
               //在OnAnimationStart接口回调中进行预加载资源的操作
                                  
          }
        
         
     }    
     

五、总结

Swiper +LazyForEach +cachedCount +OnAnimationStart配合使用能够达到最佳优化效果。