DEV Community

陈杨
陈杨

Posted on

Hong Mong 5 Development Treasure Case Sharing Swiper Component Performance Optimization

HarmonyOS Treasure: Swiper Component Performance Optimization in Practice—Say Goodbye to Lag and Frame Drops!

Hello everyone! Recently, while developing with HarmonyOS, I stumbled upon some "treasure" performance optimization cases hidden in the official documentation, especially for the Swiper component in complex scenarios. The real-world results are amazing! Today, I'll share these "black tech" tricks in detail, with full code analysis and comparison data, to make your app run silky smooth!

1. Background: Why Does Swiper Lag?

Swiper is commonly used for paging scenarios (like galleries or quiz pages), but when dealing with complex subpages, the on-demand loading mechanism causes a time-consuming process of loading → layout → rendering during switching, resulting in lag and frame drops. Official tests show: loading 1000 pages with ForEach takes 951ms, with a frame drop rate of 8.5%!

2. Four Optimization Solutions + Code Practice

1. Lazy Loading: Use LazyForEach Instead of ForEach

Principle: Only render pages in the visible area, and automatically destroy those that slide out.

// Before optimization: ForEach loads all pages at once (memory explosion!)
Swiper() {
  ForEach(this.list, (item: number) => {
    SwiperItem().height('100%') // All 1000 pages loaded
  })
}

// After optimization: LazyForEach loads on demand
Swiper() {
  LazyForEach(this.dataSource, (item: Question) => {
    QuestionSwiperItem({ itemData: item }) // Only render visible pages
  })
}
Enter fullscreen mode Exit fullscreen mode

Effect (1000 pages):

Loading Method Time Frame Drop Rate Memory Usage
ForEach 951ms 8.5% 200MB
LazyForEach 280ms 0% 25MB

💡 Key Point: The data source must implement the IDataSource interface (see official example).

2. Cache Control: Fine-Tune with cachedCount

Principle: Preload off-screen pages, but too much cache will blow up memory!

Swiper() {
  LazyForEach(...)
}
.cachedCount(2) // Core parameter: cache 2 pages on each side
Enter fullscreen mode Exit fullscreen mode

Performance Comparison (20-page gallery):

Cache Count Frame Drop Rate Memory Usage
1 3.0% 64MB
2 3.3% 117MB
8 3.0% 377MB

✅ Conclusion: For one page per screen, cachedCount=1 or 2 is optimal, balancing memory and smoothness!

3. Preload on Fling: onAnimationStart for Resource Preloading

Principle: When the user flings, preload subsequent resources while the main thread is idle.

Swiper()
  .cachedCount(1)
  .onAnimationStart((index, targetIndex) => { // Fling start callback
    // Preload images/network data for the target page
    if (targetIndex < data.length - 2) {
      loadImageAsync(targetIndex + 2); // Preload the 2nd page ahead
    }
  })
Enter fullscreen mode Exit fullscreen mode

Subcomponent Optimization: Check if resources are preloaded

@Component
struct PreloadSwiperItem {
  aboutToAppear() {
    if (!this.data.pixelMap) { // Download only if not cached
      downloadImage().then(pixelMap => {
        this.data.pixelMap = pixelMap;
      })
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Effect:

  • Not preloaded: Component build time 50ms
  • After preloading: Build time 2ms (resource ready)

4. Component Reuse: @Reusable to Reduce Creation Overhead

Principle: Reuse component instances that slide off-screen to reduce frequent creation/destruction.

@Reusable // Key decorator!
@Component
struct QuestionSwiperItem {
  aboutToReuse(params: Object) { // Update data when reused
    this.itemData = params.itemData as Question;
  }
  build() { ... }
}
Enter fullscreen mode Exit fullscreen mode

📌 Official Data: After reuse, frame rate increases by 15%+ in the same scenario, and memory fluctuation decreases.

3. Summary: Four Swiper Optimization Moves

  1. Always use lazy loading: LazyForEach instead of ForEach
  2. Fine-tune cache: cachedCount recommended value 1~2
  3. Preload on fling: onAnimationStart + async preloading
  4. Reuse components: @Reusable + aboutToReuse() to update data

Final Words

These HarmonyOS performance optimization cases are truly eye-opening! After integrating them, our gallery page frame rate increased from 45fps→58fps, with outstanding results. If you encounter complex list/carousel scenarios, be sure to try these solutions. If you have other pitfalls or experiences, feel free to share in the comments 👇

If you found this useful, don't forget to like and bookmark! 🚀

Top comments (0)