DEV Community

陈杨
陈杨

Posted on

Hong Mong 5 Development Treasure Case Sharing Performance Detection Tool Unveiled

HarmonyOS Performance Detection Treasure Tools Revealed! Practical Development Pitfall Avoidance Guide

Hello everyone! I'm Xiaoming, an explorer on the road of HarmonyOS development. Today, I discovered an official hidden collection of performance tuning tools, which feels like finding a new continent! Many case documents are deeply buried, but they are super practical in real development. Let's get straight to the point and dive into the good stuff!

🔥 1. The Full Set of Tuning Tools

The official tools are divided into two main categories: Static Detection (prevent pitfalls in advance) and Dynamic Detection (catch bugs at runtime):

graph LR
A[Performance Tools] --> B[Static Detection-Code Linter]
A --> C[Dynamic Detection-AppAnalyzer]
B --> D[Code Specification Check]
C --> E[Runtime Performance Checkup]
Enter fullscreen mode Exit fullscreen mode

⚡ 2. Static Pitfall Avoidance: Code Linter

Core Function: Real-time detection of potential performance issues while coding, like having an expert watching over your shoulder!

📌 Practical Case 1: Sparse Array Trap

Problematic Code (Official rule @performance/sparse-array-check):

// Creating a sparse array (holes in the middle)
let arr = new Array(100);
arr[99] = 1; // Only the last element is assigned
Enter fullscreen mode Exit fullscreen mode

Risk: HarmonyOS's ArkTS engine handles sparse arrays very inefficiently!

Optimization: Use continuous arrays instead

// Correct approach: pre-fill with default values
let arr = new Array(100).fill(0);
arr[99] = 1;
Enter fullscreen mode Exit fullscreen mode

📌 Practical Case 2: Updating State Variables Madly Inside Loops

Problematic Code (Rule @performance/hp-arkui-no-state-var-access-in-loop):

@State count: number = 0;

ForEach(this.dataList, item => {
  this.count += item.value; // Fatal! Each loop triggers UI redraw
})
Enter fullscreen mode Exit fullscreen mode

Risk: Frequently updating @State variables in a loop will make the UI lag badly!

Optimization: Use a temporary variable instead

let tmpCount = 0;
ForEach(this.dataList, item => {
  tmpCount += item.value; // Accumulate first
})
this.count = tmpCount; // Update once at the end
Enter fullscreen mode Exit fullscreen mode

🔍 3. Dynamic Bug Catching: AppAnalyzer

Core Function: Give your app a "full body checkup" and generate a performance diagnosis report with one click!

Usage Steps (with Pitfall Avoidance Tips):

  1. Open the tool: DevEco Studio > Tools > AppAnalyzer
  2. Select module: Must sign and package in advance (beginners often forget this!)
  3. Start checkup: Check Benchmark Performance Suite → Click Start
  4. Manual operation: Follow prompts to swipe pages/click buttons (click Stop when countdown ends)

🔥 Key Points in the Report:

  • Red/Yellow Warnings: Such as Frame drops during scrolling, Cold start timeout
  • Smart Navigation:
    • Optimization Suggestion: View official optimization solutions
    • Code Linter: Automatically locate problematic code files
    • Profiler: Import trace logs for in-depth analysis

🚀 4. Quick Reference Table of High-Frequency Performance Rules

Scenario Rule ID Must-Fix Level
Scrolling lag @performance/use-row-column-to-replace-flex ⚠️Warning
Animation frame drops @performance/combine-same-arg-animateto ⚠️Warning
Slow cold start @performance/start-window-icon-check 💡Suggestion
Memory leak risk @performance/remove-unchanged-state-var 💡Suggestion

💡 Case: @performance/use-row-column-to-replace-flex

Too many nested Flex layouts? Official confirmation:

// Not recommended  
Flex({ direction: FlexDirection.Column }) { ... }  

// Recommended! Performance improves by 20%+  
Column() { ... }
Enter fullscreen mode Exit fullscreen mode

💎 5. Bonus: Golden Rules for Performance Optimization

  1. State Variables: Changing @State triggers UI updates, so keep operations lightweight
  2. Component Reuse: LazyForEach must set cacheCount (Official rule ID: hp-arkui-set-cache-count-for-lazyforeach-grid)
  3. Resource Loading: Use async for large images, put network requests into taskpool (Rule ID: hp-arkui-use-taskpool-for-web-request) 
// Network request optimization example
import taskpool from '@ohos.taskpool';

@Concurrent
async function fetchData() {
  return await http.get('https://api.example.com/data');
}

// Execute in thread pool
taskpool.execute(fetchData).then(result => {
  // Update UI
});
Enter fullscreen mode Exit fullscreen mode

🌈 Conclusion

The HarmonyOS performance detection tools I found this time are like giving your app "clairvoyance." Especially the real-time prompts from Code Linter have saved me countless late nights! I recommend everyone to use both tools together during development:

  • Write code on the left → Run Code Linter on the right
  • Before nightly commits → Run AppAnalyzer for a checkup

Finally, shout out: Encountering mysterious performance issues? Go shout in the community!

If you found this useful, give it a like ❤️, see you in the comments~

Top comments (0)