DEV Community

陈杨
陈杨

Posted on

Treasure Case Sharing of HarmonyOS 5 Development — Optimizing Application Latency Issues

HarmonyOS Performance Optimization Treasure Guide: 6 Practical Cases to Make Your App Fly!

Hello everyone! Today, while browsing the HarmonyOS documentation, I discovered a performance optimization treasure trove! The official docs quietly hide so many practical cases, covering everything from UI rendering to database operations. If I had found these earlier, I wouldn't have had to work overtime fixing bugs last week 😭. I've organized and shared them here, with detailed code analysis!

🎯 Case 1: Layout Hierarchy Optimization (Flex vs Relative Layout)

Problem: Message box list lags when loading 1024 items (1096ms)

Optimization: Use relative layout instead of default Flex layout

// Before optimization: Flex layout (6 nested layers)
Flex({ direction: FlexDirection.Row }) {
  Image($r('app.media.avatar'))
  Badge({count:1})
  Text(user.name)
  //...other components 
}

// After optimization: Relative layout (3 nested layers)
Column() {
  Image($r('app.media.avatar'))
    .position({ x: 10, y: 5 }) // Precise positioning
  Text(user.name)
    .position({ x: 60, y: 8 })
}
Enter fullscreen mode Exit fullscreen mode

Effect:

Data Volume Flex Layout Relative Layout Improvement
1024 items 1096ms 986ms ✅ 10%

Key Point: Reduce the number of parent containers, use absolute positioning instead of flexible calculation

⚡ Case 2: Data Loading Concurrency Optimization

Problem: Loading 4000 region data items lags (780ms)

Optimization: Use TaskPool for asynchronous loading

@Concurrent 
function loadData() { // Executed in a sub-thread
  return bigData.sort() // Time-consuming sort operation
}

aboutToAppear() {
  taskpool.execute(new taskpool.Task(loadData))
    .then(result => this.data = result)
}
Enter fullscreen mode Exit fullscreen mode

Effect:

Loading 4000 items reduced from 780ms → 172ms!

Note: For less than 1000 items, the difference is small. For large data volumes, this is a must.

💾 Case 3: Database Query Optimization

Problem: Querying 5000 account records is slow (157ms)

Optimization: Get column index outside the loop

// Before optimization (repeated call inside loop)
for(let i=0; i<5000; i++){
  resultSet.getDouble(resultSet.getColumnIndex('amount')) // ❌
}

// After optimization (get index in advance)
const amountIndex = resultSet.getColumnIndex('amount') // ✅
for(let i=0; i<5000; i++){
  resultSet.getDouble(amountIndex) 
}
Enter fullscreen mode Exit fullscreen mode

Effect: Querying 5000 records 157ms → 110ms

Principle: Avoid repeated column name parsing, similar to SQL precompilation

📸 Case 4: Delayed Release of Camera Resources

Problem: Lag when closing camera interface (457ms)

Optimization: Use setTimeout for asynchronous release

onPageHide() {
  setTimeout(() => this.releaseCamera(), 200) // Delayed release
}

async releaseCamera() {
  await captureSession.stop() 
  await previewOutput.release()
  //...other release operations
}
Enter fullscreen mode Exit fullscreen mode

Effect: Release time 457ms → 85.6ms

Tip: Perform time-consuming operations during periods when the user is not aware

👆 Case 5: Gesture Recognition Optimization

Problem: Drag response delay (145ms)

Optimization: Adjust minimum trigger distance

// Before modification (trigger at 100vp)
PanGesture().setDistance(100) 

// After modification (trigger at 4vp, more sensitive)
PanGesture().setDistance(4)
Enter fullscreen mode Exit fullscreen mode

Effect: Response speed 145ms → 38ms

Note: Balance sensitivity and false touch rate according to the scenario

✨ Case 6: Transition Animation Optimization

Problem: Tabs switching animation lags (1s+)

Optimization: Adjust animationDuration parameter

Tabs() {
  //...tab content
}.animationDuration(100) // Changed from default 300ms to 100ms
Enter fullscreen mode Exit fullscreen mode

Comparison Effect:

Animation Duration Completion Delay
1000ms 1s7ms
100ms 99ms

Suggestion: Complex animations should not exceed 200ms

Bonus: Performance Self-Check List 🧾

  1. ✅ List page nesting level ≤ 3 layers
  2. ✅ Use asynchronous loading for data over 1MB
  3. ✅ Get index before database loop operations
  4. ✅ Delay release of heavy resources like camera/files
  5. ✅ Optimize gesture trigger distance according to scenario
  6. ✅ Set animation duration ≤ 300ms

These cases are all practical highlights from Huawei's official documentation. Highly recommended to bookmark and review repeatedly! Have you encountered any other performance issues? Feel free to discuss in the comments~

Top comments (0)