DEV Community

陈杨
陈杨

Posted on

Hong Mong 5 Development Treasure Case Sharing Cold Start Optimization Case Sharing

HarmonyOS Cold Start Optimization Revealed! These Official Treasure Cases Doubled My Efficiency 🚀

Hello everyone! Recently, while optimizing HarmonyOS apps, I stumbled upon some hidden performance optimization gems in the official documentation. These practical cases made my app startup speed soar! Today, I’ve organized and shared these valuable insights with detailed code analysis and pitfalls to avoid~

1. Why Is Cold Start So Important?

When users tap the app icon, a wait time exceeding 1100ms leads to a noticeable lag. Cold start refers to scenarios where the app process is completely new (no background process), requiring more initialization than a warm start:

// Cold start pain point example: main thread blocking
@Entry
@Component
struct SlowStartDemo {
  aboutToAppear(): void {
    let count = 0;
    // 2 million loops directly block rendering!
    while(count < 2000000) { count++ } 
  }
}
Enter fullscreen mode Exit fullscreen mode

2. Full Breakdown of the Cold Start Process

The official docs divide cold start into 5 key stages:

  1. 📦 Process creation & initialization (including launch icon decoding)
  2. ⚙️ Application & Ability initialization
  3. 🔄 AbilityStage lifecycle
  4. 🎨 Home page loading and rendering
  5. 🌐 Network data refresh

3. Performance Analysis Tool: Profiler Launch

The Profiler in Harmony DevEco Studio can accurately pinpoint the time spent at each stage:

Using the Launch analysis tool, we found that the UI Ability OnForeground stage in the example took 4.1s, with the culprit being the synchronous computation task in aboutToAppear!

4. Six Practical Optimizations (with Code)

1️⃣ Asynchronous Delayed Tasks

Problematic code:

aboutToAppear(): void {
  this.computeTask(); // Synchronous blocking
}
Enter fullscreen mode Exit fullscreen mode

Optimized solution:

// Use setTimeout for asynchronous execution
private computeTaskAsync(): void {
  setTimeout(() => {
    this.computeTask();
  }, 1000); // Delay execution by 1 second
}
Enter fullscreen mode Exit fullscreen mode

✅ Effect: UI Ability OnForeground stage reduced from 4.1s → 0.2s

2️⃣ Launch Icon Resolution Optimization

Modify entry/src/main/module.json5:

{
  "abilities": [{
    "startWindowIcon": "$media:startIcon", 
    // Key! Recommended size ≤256x256px
  }]
}
Enter fullscreen mode Exit fullscreen mode

✅ Effect: Replacing a 4096x4096 icon with 144x144 reduced startup time by 37.2ms

3️⃣ Import Modules on Demand

Anti-pattern:

import * as fullModule from '@large/module'; // Importing the entire module
Enter fullscreen mode Exit fullscreen mode

Best practice:

import { essentialFunc } from '@large/module'; // Import only what you need
Enter fullscreen mode Exit fullscreen mode

✅ Effect: Reducing from 15 to 5 modules, initialization time dropped from 6239μs → 119μs

4️⃣ Preload Network Requests

Before optimization:

// Index.ets
onAppear(() => { httpRequest(); }) // Request sent after home page appears
Enter fullscreen mode Exit fullscreen mode

After optimization:

// MyAbilityStage.ets
onCreate(): void {
  httpRequest(); // Request sent as soon as AbilityStage is created
}
Enter fullscreen mode Exit fullscreen mode

✅ Effect: First frame rendering reduced from 1700ms → 885ms

5️⃣ Avoid Nested Exports

Anti-pattern:

// FileA.ts
export * from './FileB'; // Multi-level nested export

// FileB.ts
export * from './FileC';
Enter fullscreen mode Exit fullscreen mode

Best practice:

// Directly reference the target file
import { targetData } from './FileC';
Enter fullscreen mode Exit fullscreen mode

✅ Effect: Module loading time reduced by 21%

6️⃣ Home Page Data Caching 

async aboutToAppear() {
  const cachedData = await loadCache(); // Read cache first
  fetchNewData().then(updateCache); // Update asynchronously
}
Enter fullscreen mode Exit fullscreen mode

✅ Effect: First frame display reduced from 641ms → 68ms

5. Pitfall Guide

  1. Be cautious with HSP dynamic packages: Tests show that 20 HSP mixed packages take 34643μs, while switching to HAR only takes 36μs!
  2. Lifecycle function taboos: Avoid synchronous time-consuming operations in AbilityStage.onCreate() and aboutToAppear()
  3. Layout optimization tips: Use if conditional rendering instead of building all components at once: 
build() {
  Column() {
    if(this.dataLoaded) { // Render only when data is ready
      ComplexComponent()
    } else {
      LoadingIndicator()
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

6. Summary

From these official practical cases, I’ve summarized three golden rules for cold start optimization:

🔥 Make everything asynchronous that can be—never block the main thread

📦 Delay loading non-essential resources

💾 Prioritize local cache for first-screen data

After optimization, our app’s cold start speed improved by over 300%! All these treasure cases are in the official performance optimization docs, highly recommended for in-depth study.

One last tip: Performance optimization is not magic—using the right tools and methods = skyrocketing user experience! If you encounter any pitfalls, feel free to discuss in the comments below 👇

If you found this helpful, don’t forget to like and bookmark~ ✨

Top comments (0)