HarmonyOS鸿蒙Next中Swiper高性能开发

HarmonyOS鸿蒙Next中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配合使用能够达到最佳优化效果


更多关于HarmonyOS鸿蒙Next中Swiper高性能开发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，Swiper组件用于实现滑动切换效果，常用于轮播图、图片浏览等场景。为了确保高性能开发，可以采取以下措施：

  1. 减少渲染开销：使用LazyForEach或ForEach时，避免在每次渲染时创建新的对象或执行复杂计算。确保数据源稳定，减少不必要的重渲染。

  2. 图片优化：使用Image组件时，确保图片资源经过压缩，合理设置resizeMode和fitMode，避免加载过大的图片资源。

  3. 异步加载：对于需要动态加载的内容，使用异步任务或@State、@Link等状态管理机制，确保UI线程不被阻塞，滑动过程中不会出现卡顿。

  4. 内存管理：及时释放不再使用的资源，避免内存泄漏。使用onPageChange事件监听滑动状态，动态加载或卸载内容。

  5. 硬件加速：确保Swiper组件启用硬件加速，通过设置enableHardwareAcceleration属性，提升滑动流畅度。

  6. 事件优化：减少事件绑定的复杂度，避免在滑动过程中频繁触发事件回调。使用debounce或throttle技术优化高频事件处理。

  7. 布局优化：避免嵌套过深的布局结构，使用Flex或Grid等布局组件，减少布局计算的开销。

通过以上方法，可以有效提升Swiper组件在HarmonyOS鸿蒙Next中的性能表现，确保滑动流畅、响应迅速。

更多关于HarmonyOS鸿蒙Next中Swiper高性能开发的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，开发高性能Swiper组件需注意以下几点：

  • 优化布局：使用Flex布局减少嵌套层级，提升渲染效率。
  • 懒加载：通过LazyForEach实现图片或内容的懒加载，减少内存占用。
  • 复用组件：利用RecyclerView或List组件复用视图，避免频繁创建销毁。
  • 异步加载：采用异步任务加载数据，避免UI线程阻塞。
  • 缓存机制：合理使用缓存策略，减少重复数据加载。
  • 硬件加速：开启硬件加速，提升滑动流畅度。

通过这些优化，可以显著提升Swiper组件的性能和用户体验。

回到顶部