DEV Community

陈杨
陈杨

Posted on

Hong Mong 5 Development Treasure Case Sharing Web Loading Delay Optimization Analysis

Of course! Here is a detailed and easy-to-understand article, combining official HarmonyOS cases and real code, to help you deeply understand optimization techniques for Web loading completion delay 👇

🚀 HarmonyOS Development Treasure: Practical Web Loading Completion Delay Optimization

Hello everyone! Today, while browsing the HarmonyOS developer documentation, I discovered a hidden performance optimization treasure area—the official docs quietly provide a ton of practical cases! Especially the Web loading completion delay analysis section, which is a must-have for mobile development. I immediately organized the key points and code implementations to share with you!

⏱️ What is "Loading Completion Delay"?

Simply put: The time from when the user clicks to when the page is fully rendered. HarmonyOS recommends keeping it within 900ms (users will noticeably feel lag if it exceeds this).

Optimization core: Reduce white screen time and improve first screen rendering speed.

🔍 Official Performance Analysis Tools

1️⃣ DevEco Profiler (Locate Time-Consuming Bottlenecks)

  • Operation Path: DevEco Studio → Tools → Profiler
  • Key Trace Points: 
H:NWebImpl | CreateNWeb       # Web initialization starting point
SkiaOutputSurfaceImplOnGpu::SwapBuffers  # Rendering completion endpoint
Enter fullscreen mode Exit fullscreen mode

By capturing Trace, you can directly locate the time-consuming stages:

(Note: Diagram from official documentation)

2️⃣ DevTools (In-depth Webpage Analysis)

After connecting the device, use Chrome DevTools for analysis:

  • Network lane: View resource loading sequence
  • Main lane: Monitor JS/CSS parsing blocks
  • Performance panel: Locate long tasks

🛠️ Four Major Optimization Directions + Code Practice

Below, combined with official cases and code, is a hands-on optimization guide:

▶️ Case 1: Detail Page Load 2351ms → Optimized to 800ms

Root Causes:

  1. 12 CSS/JS files loaded on the first screen (530ms)
  2. Serial API requests publishDetailv2() + getPublishDetailRecommendList()
  3. Images not lazy-loaded (48 images loaded at once)

Optimization Code:

// 1. Merge and compress static resources (using Webpack/Vite)
// Example config: vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash', 'dayjs']
        }
      }
    }
  }
})

// 2. API prefetch (HarmonyOS API)
import featureAbility from '@ohos.ability.featureAbility';
// Prefetch data in parent page
onPageShow() {
  const result = await featureAbility.fetch({
    url: 'https://api.example.com/preload',
    method: "POST"
  });
}

// 3. Image lazy loading (HarmonyOS List component)
<List>
  <LazyForEach items={imageList}>
    (item) => (
      <Image 
        src={item.url} 
        loadMode="lazy" // ✨ Key property
      />
    )
  </LazyForEach>
</List>
Enter fullscreen mode Exit fullscreen mode

▶️ Case 2: Coupon Page JS Blocking 1.2s

Root Causes:

  • getUserInformation() API takes 1.2s
  • JS main thread blocking causes 600ms white screen

Optimization Code:

// 1. Split JS tasks (Web Worker)
import worker from '@ohos.worker';
const workerInstance = new worker.ThreadWorker('scripts/worker.js');

// Main thread sends task
workerInstance.postMessage({ type: 'heavyCalc', data: largeData });

// Perform time-consuming operation in worker.js
workerInstance.onmessage = (e) => {
  if (e.type === 'heavyCalc') {
    const result = heavyLogic(e.data);
    workerInstance.postMessage(result);
  }
}

// 2. Skeleton screen degraded rendering
@Component
struct SkeletonPage {
  build() {
    Column() {
      if (this.isLoading) {
        LoadingProgress() // HarmonyOS loading animation
        ForEach(this.skeletonItems, item => <SkeletonItem />)
      } else {
        RealContent()
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

⚡ Summary of High-Frequency Optimization Methods

Problem Type Optimization Solution HarmonyOS API/Component
Slow resource loading CDN acceleration + resource merging @ohos.net.http
JS blocking rendering Task splitting to Worker ThreadWorker
Serial API requests API prefetch + parallelization Promise.all()
Too many first screen images Lazy loading + placeholder Image.loadMode="lazy"
Repeated rendering Component reuse + @Reusable @Reusable
decorator

💎 Golden Rules for Performance Optimization

  1. First screen resources ≤ 300KB (compress images/Code Splitting)
  2. Key API response ≤ 200ms (cache/CDN/SSR)
  3. Avoid synchronous JS loading (<script async>)
  4. Long lists must be lazy loaded (LazyForEach)

🌟 Conclusion

This summary made me realize: there are so many practical gems hidden in the HarmonyOS documentation system, especially in the performance optimization section—it's like open-sourcing enterprise-level solutions! I recommend everyone to dig into the "Best Practices" section, and feel free to share your optimization insights in the comments~

Performance optimization is not magic. Use the right tools + understand the principles = silky smooth experience! 💪

Top comments (0)