DEV Community

陈杨
陈杨

Posted on

Hong Mong 5 Development Treasure Case Sharing Grid Performance Optimization Case

Discovering HarmonyOS Treasures: Practical Tips for Optimizing Grid Component Performance!

Hello everyone! Recently, I found a super practical performance optimization case in the HarmonyOS developer community—solving the problem of slow loading and laggy scrolling in the Grid component. The official documentation actually hides many valuable cases, but many people may not have noticed them. Today, I’ll break down this case for you, with detailed explanations and code analysis, to help you easily improve your app’s smoothness!

📌 Problem Scenario: Why Does Grid Lag?

When the Grid layout needs to implement irregular grids (such as merged cells), we often use columnStart/columnEnd to set the span of GridItems. However, performance issues arise in the following scenarios:

  1. Large amounts of data (e.g., 2000+ GridItems)
  2. Dynamic operations (deletion, drag-and-drop, scrollToIndex jumps)

Root Cause:

When using columnStart/columnEnd, the Grid needs to traverse all items to calculate positions, and operations like scrollToIndex(1900) trigger a full traversal, causing a time spike (measured up to 447ms!).

🚀 Solution: Use GridLayoutOptions Instead

HarmonyOS provides the GridLayoutOptions layout option, which calculates positions directly through predefined rules, avoiding traversal!

✅ Core Optimization Principle

  1. Declare irregular items in advance: Store the indexes of items that need to span columns (e.g., the first of every four) in an array.
  2. Rule-based layout: The Grid calculates positions directly based on preset rules, reducing time complexity from O(n) to O(1).

💻 Code Comparison and Explanation

Bad Example: Using columnStart/columnEnd (Poor Performance) 

// Problematic code: traverses to calculate positions  
Grid() {  
  LazyForEach(this.datasource, (item, index) => {  
    if (index % 4 === 0) {  
      GridItem() { /* content */ }  
        .columnStart(0).columnEnd(2) // Span 2 columns  
    } else { /* Normal Item */ }  
  })  
}  
.columnsTemplate('1fr 1fr 1fr') // 3-column layout
Enter fullscreen mode Exit fullscreen mode

Reason for lag:

Each time scrollToIndex(1900) is called, the Grid traverses from index 0 to 1900, calculating positions one by one.

Good Example: Using GridLayoutOptions (Performance Optimized) 

// Optimized code: predefine irregular items  
private irregularData: number[] = []; // Store indexes of irregular items  
layoutOptions: GridLayoutOptions = {  
  regularSize: [1, 1],      // Default: 1 row, 1 column  
  irregularIndexes: this.irregularData // Array of irregular item indexes  
};  

// Pre-calculate in aboutToAppear  
aboutToAppear() {  
  for (let i = 0; i < 2000; i++) {  
    if (i % 4 === 0) this.irregularData.push(i); // Every first of four spans columns  
  }  
}  

// Grid uses layout rules  
Grid(this.scroller, this.layoutOptions) {  
  LazyForEach(this.datasource, (item, index) => {  
    GridItem() { /* content */ } // No need for if-else!  
  })  
}  
.columnsTemplate('1fr 1fr 1fr')
Enter fullscreen mode Exit fullscreen mode

Optimization points:

  1. All items are handled uniformly, no conditional branches needed.
  2. scrollToIndex(1900) locates directly via mathematical calculation, taking only 12ms (vs. 447ms before).

📊 Performance Comparison Data

Tested using HarmonyOS DevEco Studio’s Profiler tool:

Solution scrollToIndex(1900) Time
columnStart/columnEnd 447ms
GridLayoutOptions 12ms

Trace Analysis:

  • Bad example: Many BuildLazyItem tags (each item built one by one)
  • Good example: Only one BuildLazyItem tag (direct positioning)

💎 Best Practice Summary

  1. Regular grids: Use columnsTemplate/rowsTemplate.
  2. Irregular grids with merged cells:
    • Prefer GridLayoutOptions + irregularIndexes
    • Avoid dynamically modifying columnStart/columnEnd
  3. Super long lists: Be sure to use LazyForEach for lazy loading!

🌟 Personal Insights

There are actually many “performance treasures” hidden in HarmonyOS documentation. This case is a typical example—using calculation instead of traversal. This idea can be reused in drag-and-drop lists, waterfall flows, and other scenarios. Pay more attention to community cases during development to avoid many pitfalls!

If you have other Grid optimization tips, feel free to share them in the comments~ You’re also welcome to ask questions and discuss anything about HarmonyOS development!

Top comments (0)