DEV Community

陈杨
陈杨

Posted on

Hong Mong 5 Development Treasure Case Sharing Web Page Click Response Delay Analysis

Here are practical web performance optimization case studies for HarmonyOS developers, with in-depth expansions based on official documentation.

🌟 HarmonyOS Web Performance Optimization Treasure Guide! Practical Tips Not Explicitly Stated in the Official Docs

Introduction:

Hello HarmonyOS developers! While troubleshooting web page lag recently, I unexpectedly discovered some treasure cases for performance optimization in the HarmonyOS developer documentation! These practical experiences are hidden in the "App Quality > Performance Analysis" section. Today, I've organized these golden tips into a dry-goods sharing for everyone👇

🔍 1. Core Metrics for Click Response Delay

Official definition: From click to UI change ≤ 100ms

| User Click | → DispatchTouchEvent → Component Init → Render → | First Frame Display |
      Start (Touch Event)                                 End (Stable VSYNC Signal)
Enter fullscreen mode Exit fullscreen mode

📌 Pitfall Tip: The end point should be the continuous and stable VSYNC signal (see Fig. 4) to avoid misjudging a single-frame flicker!

🛠️ 2. Performance Analysis Toolchain

  1. DevTools Timeline - Locate laggy areas 
// Enable performance monitoring (inject into web page)
console.time('clickRendering');
// ...business code
console.timeEnd('clickRendering'); // Console outputs duration
Enter fullscreen mode Exit fullscreen mode

290ms long duration in Area 2? Lock it down immediately!

  1. ArkUI Trace Capture 
hdc shell bytrace -t 10 -b 2048 > /data/click.trace
Enter fullscreen mode Exit fullscreen mode

💥 3. High-Frequency Optimization Scenarios + Code Practices

🚫 Scenario 1: Recursive Functions Causing CPU Overload

Problematic Code (Official Case):

// O(2^n) Fibonacci recursion
function myFun1(n) {
  if (n <= 1) return n;
  return myFun1(n-1) + myFun1(n-2); // Recursion hell!
}
Enter fullscreen mode Exit fullscreen mode

Optimization → Use a loop (Time complexity O(n)):

function myFun2(n) {
  let [a, b] = [0, 1];
  for (let i = 0; i < n; i++) {
    [a, b] = [b, a + b];
  }
  return a;
}
// Duration reduced from 290ms → 0.3ms!
Enter fullscreen mode Exit fullscreen mode

🌐 Scenario 2: Network Requests Blocking Rendering

Fatal Mistake: Synchronous requests in click callbacks

// Wrong example!
handleClick(() => {
  const data = fetchSync('https://api.example.com'); // Synchronous blocking!
  updateUI(data);
});
Enter fullscreen mode Exit fullscreen mode

Correct Approach → Async handling + loading state:

async function handleClick() {
  showLoading(); // Immediate feedback!
  const data = await fetch('https://api.example.com');
  updateUI(data);
}
Enter fullscreen mode Exit fullscreen mode

⏳ Scenario 3: setTimeout Abuse

Typical Problem: Artificially added delay

// Unnecessary delay!
handleClick(() => {
  setTimeout(() => {
    startAnimation(); // Animation starts after 500ms
  }, 500);
});
Enter fullscreen mode Exit fullscreen mode

Optimization → Trigger animation directly, use CSS for timing:

/* Use CSS animation instead of JS delay */
.element {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.1, 1);
}
Enter fullscreen mode Exit fullscreen mode

🔧 4. Advanced Optimization Tips

  1. First Frame Acceleration: Preload main resources 
<!-- Preload critical resources -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="core.js" as="script">
Enter fullscreen mode Exit fullscreen mode
  1. Transparent Animation Trap: 
/* Avoid initial transparency causing a 'no change' illusion */
.animated-element {
  opacity: 0.01; /* Use a very small value instead of transparent */
  background: white; /* Cover transparent background */
}
Enter fullscreen mode Exit fullscreen mode
  1. Web Component Initialization Acceleration 
// Pre-initialize web component on ArkTS side
@Component
struct MyWeb {
  webController: WebController = new WebController();
  aboutToAppear() {
    this.webController.loadUrl('page.html'); // Preload
  }
}
Enter fullscreen mode Exit fullscreen mode

📊 5. Optimization Results Verification

Trace comparison before and after optimization:

Response time reduced from 320ms → 68ms!

💬 Final Words

These cases come from the official documentation's "Performance Analysis" section, which many may have overlooked. In actual development, it's recommended to:

  1. Use console.time() for quick pinpointing
  2. Prefer CSS for complex animations
  3. Avoid heavy computation on the main thread

When encountering lag issues, remember this analysis path:

Screen recording for frame capture → Trace localization → DevTools layer-by-layer analysis

Have you encountered any bizarre web performance issues? Feel free to share your pitfalls in the comments! 🚀

Keep coding, keep optimizing!

Top comments (0)