DEV Community

ι™ˆζ¨
ι™ˆζ¨

Posted on

Hong Mong 5 Development Treasure Case Sharing Click to Complete Delay Analysis

πŸš€ HarmonyOS Completion Latency Optimization Guide: Make Your App Smooth as Silk!

In mobile development, completion latency is the lifeline of user experience! Today, let's dive into HarmonyOS completion latency optimization, revealing official documentation tips to make your app say goodbye to lag and run smoothly!

1. Why is Completion Latency So Important?

Imagine: when you click a button and the screen freezes with no responseβ€”this terrible experience makes users instantly lose patience! In HarmonyOS development:

  • Completion Latency = Time from user click β†’ interface fully stable and readable
  • Golden Standard: ≀900ms (HarmonyOS official recommendation)
  • Core Impact: User retention, app rating, brand image

Image: Completion latency includes response latency and rendering latency

2. The Three Powerful Tools πŸ› οΈ

1️⃣ AppAnalyzer - Performance Checkup Expert 

# Run performance check in DevEco Studio
./gradlew appanalyzer --test-type performance
Enter fullscreen mode Exit fullscreen mode
  • One-click check if completion latency meets the standard
  • Generate detailed diagnostic reports
  • Supports compatibility/UX/best practices multi-dimensional testing

2️⃣ DevEco Profiler - Performance Microscope 

// Insert performance markers in code
profiler.startTrace('page_switch');
// ...page switch code...
profiler.stopTrace('page_switch');
Enter fullscreen mode Exit fullscreen mode
  • Frame rate analysis: catch overtime rendering frames (red warning frames)
  • Call stack tracing: ArkTS/Native dual perspective analysis
  • Supports deep optimization for cold start/lag/memory scenarios

3️⃣ ArkUI Inspector - UI Structure X-ray

  • Real-time view of component tree structure
  • Analyze layout hierarchy complexity
  • Locate over-rendered components

3. Full Optimization Workflow 🚦

Step 1: Locate Time-Consuming Bottlenecks 

graph TD
    A[Record operation video] --> B{Calculate completion latency}
    B -->|>900ms| C[Capture Trace]
    C --> D[Mark start and end points]
    D --> E[Analyze key swimlanes]
Enter fullscreen mode Exit fullscreen mode

Key Swimlane Decryption:

  1. ArkTS Callstack: Find time-consuming business logic
  2. Callstack: Analyze Native layer performance holes
  3. Frame: Lock onto overtime rendering frames
  4. ArkUI Component: Discover component rendering bottlenecks
  5. H:Animator: Optimize animation duration

Step 2: Typical Problem Solutions

πŸ”₯ Case 1: Singleton Misuse Causing 350ms Lag

Problem Code:

// Wrong: Create + destroy singleton on every switch
Tabs.onChange((index) => {
  AudioPlayerService.getInstance().stop().then(() => {
    AudioPlayerService.destroy(); // Destroy instance
  });
});

class AudioPlayerService {
  static getInstance() {
    if (!this.instance) {
      this.instance = new AudioPlayerService(); // Time-consuming creation
    }
    return this.instance;
  }
}
Enter fullscreen mode Exit fullscreen mode

Optimization Solution:

// βœ… Correct: Add instance existence check
Tabs.onChange((index) => {
  if (AudioPlayerService.hasInstance()) { // New check
    AudioPlayerService.getInstance().stop();
  }
});

class AudioPlayerService {
  // New instance check method
  static hasInstance() {
    return this.instance !== null;
  }
}
Enter fullscreen mode Exit fullscreen mode

Optimization Effect: Reduced 327ms of invalid creation time!

πŸ”₯ Case 2: Animation Duration Causing Latency Surge

Comparison Experiment:

// Experimental group: 100ms animation
Tabs().animationDuration(100)

// Control group: 1000ms animation
Tabs().animationDuration(1000)
Enter fullscreen mode Exit fullscreen mode

Test Results:

Animation Duration Completion Latency
100ms 99ms
1000ms 1007ms

Optimization Suggestions:

  • Default 300ms can be reduced to 150-200ms
  • High-frequency operation areas recommended ≀100ms
  • Use hardware-accelerated animation

πŸ”₯ Case 3: Incorrect Network Request Placement

Wrong Practice:

graph LR
    A[Header component] -->|Create first| B[Tabs component]
    B -->|Request in subcomponent| C[Network request]
Enter fullscreen mode Exit fullscreen mode

Result: Request blocked by Header creation for 200ms+

Correct Practice:

// Initiate requests early at the page top level
aboutToAppear() {
  this.loadHeaderData();
  this.loadTabsData(); // Load in parallel early
}

build() {
  Header({ data: this.headerData })
  Tabs({ data: this.tabsData })
}
Enter fullscreen mode Exit fullscreen mode

πŸ”₯ Case 4: Long Frame Optimization (92msβ†’16ms)

Problem Location:

  1. Profiler shows red overtime frame
  2. Callstack locates time-consuming Native layer
  3. Found unoptimized image decoding logic

Optimization Solution:

Image($r('app.media.largeImage'))
  .progressiveRendering(true) // Progressive loading
  .interpolation(ImageInterpolation.Medium) // Balance quality and performance
  .cachedCount(3) // Cache count
Enter fullscreen mode Exit fullscreen mode

4. High-Frequency Optimization Tips Collection πŸš€

Network Request Golden Rules

  1. Never initiate key requests in async callbacks
  2. Avoid initiating first-screen requests in subcomponents
  3. Use preloading + caching combo

Three Animation Optimization Moves 

// 1. Appropriately shorten duration
Navigation().transitionDuration(200)

// 2. Enable hardware acceleration
.animation({ curve: Curve.EaseInOut, options: { hardwareAccelerate: true } })

// 3. Keyframe optimization
KeyframeAnimation.ofFloat()
  .duration(150)
  .onFinish(() => { /* Precisely control end timing */ })
Enter fullscreen mode Exit fullscreen mode

UI Rendering Acceleration Secrets 

// βœ… Recommended
LazyForEach(dataSource, item => {
  ListItem({ data: item }) // Lazy load
}, item => item.id)

// ❌ Avoid
ForEach(dataSource, item => { ... }) // Full rendering

// Component reuse pool
@ComponentReuse('globalPool')
struct ReusableCard { ... }
Enter fullscreen mode Exit fullscreen mode

5. Summary: Performance Optimization Never Ends

Through the practical cases in this article, we have mastered:

  1. Using three powerful tools to accurately locate bottlenecks
  2. Solving four typical scenarios of performance issues
  3. Applying network/animation/rendering optimization tips

Remember: Every 100ms reduction in latency increases user retention by 7%! Continuous optimization is the key to ultimate experience.

Take Action Now:

  1. Open DevEco Profiler to analyze your app
  2. Locate the 3 operations with the longest latency
  3. Apply any technique from this article for optimization

What are your performance optimization tips? Welcome to share and discuss in the comments! πŸ’¬

Performance optimization is not a one-time task, but a continuous art of improvement. May your HarmonyOS app be as fast as lightning and as stable as a mountain!

Top comments (0)