Identifying and Analyzing Unnecessary UI Computations in OpenHarmony Applications
This repository contains the code and resources for the HapP(hantom)R(endering)Detection framework, a comprehensive and automated solution for detecting and resolving performance issues related to "Phantom Rendering" in OpenHarmony applications.
HapPRDetection is a novel, automated framework designed to detect and analyze Phantom Rendering - a phenomenon where mobile applications perform significant computational work on the UI thread without producing any visible changes or updates to the user interface. This computational waste leads to increased energy consumption, device heating, poor user experience, and reduced battery life.
Traditional performance analysis tools often fail to detect Phantom Rendering because they focus on visual smoothness or require expert interpretation of complex outputs like flame graphs. HapPRDetection overcomes these limitations by providing a developer-friendly approach to diagnose and fix Phantom Rendering issues, transforming complex performance analysis into actionable, function-level insights.
Phantom Rendering is a phenomenon where mobile applications perform significant computational work on the UI thread without producing any visible changes or updates to the user interface. This computational waste leads to:
- Wasted CPU and GPU resources - Applications consume processing power for no visual output
- Increased energy consumption - Device batteries drain faster due to unnecessary computations
- Device heating - Continuous processing leads to thermal issues
- Poor user experience - Reduced responsiveness and application performance
- Reduced battery life - Higher power consumption affects device longevity
Traditional performance analysis tools often fail to detect Phantom Rendering because they focus on visual smoothness metrics (like frame rates) or require expert interpretation of complex outputs like flame graphs.
Figure 1: Frame classification showing the difference between Normal Frames and Phantom Rendering frames
HapPRDetection is the first fully automated framework for detecting Phantom Rendering, offering several breakthrough capabilities:
- Uses CPU Retired Instructions as a stable metric to quantify computational work and energy consumption
- Enables precise measurement of wasted resources without requiring manual analysis
- Provides automated identification of performance bottlenecks
- Seamlessly integrates into continuous integration/continuous delivery (CI/CD) pipelines
- Shifts performance optimization from reactive post-development task to proactive, continuous process
- Enables early detection of performance issues during development
- Attributes computational costs to specific functions and code locations
- Provides concrete optimization guidance without requiring deep system knowledge
- Eliminates guesswork in performance optimization
Figure 2: Function-level attribution hierarchy showing computational cost distribution across code components
- Specifically designed for OpenHarmony's decoupled, dual-thread architecture
- Analyzes both UI Thread and Render Service Thread interactions
- Enables precise analysis of rendering inefficiencies in modern mobile architectures
Figure 3: OpenHarmony's dual-thread architecture showing UI Thread and Render Service Thread coordination
- Evaluated on 22 commercial applications
- Successfully identified issues causing up to 26x computational overhead
- Reduced diagnostic time from hours to minutes
Figure 5: Example of a real-world user complaint about application performance issues caused by phantom rendering
Our tool includes a comprehensive phantom rendering test application located in the example/ directory that simulates real-world empty frame scenarios based on Xiaohongshu (Little Red Book) performance analysis.
The example app (example/entry/src/main/ets/pages/) includes four specialized test pages:
Index.ets: Main navigation page with test scenario selectionImageBrowsePage.ets: Step 1 - Image browsing with filter processing simulationsLikeInteractionPage.ets: Step 2 - Like interactions with animation calculationsPinchZoomPage.ets: Step 3 - Pinch zoom with matrix transformationsCommentScrollPage.ets: Step 4 - Comment scrolling with layout calculations
Each test page offers two distinct modes:
- Performs real UI calculations but immediately reverts changes
- Triggers continuous state updates that produce no visual effects
- Simulates complex processing (filters, animations, transformations)
- Runs at 15-30fps with zero visible output
- Operates with zero empty frames
- Only performs UI work when user interacts
- Demonstrates efficient resource management
- Provides baseline for comparison
- Step 1 - Image Browsing: Simulates image filter processing, color space conversion, and scaling calculations that produce empty frames
- Step 2 - Like Interactions: Tests animation calculations, particle effects, and Bezier curve computations
- Step 3 - Pinch Zoom: Evaluates matrix transformations, touch processing, and bilinear interpolation
- Step 4 - Comment Scrolling: Analyzes text layout, virtual scrolling, and viewport optimization calculations
HapPRDetection consists of four interconnected modules that work together to provide comprehensive Phantom Rendering detection:
Figure 4: HapPRDetection Framework Architecture showing the interaction between four core modules
- Automatically generates executable test scripts for systematic testing
- Creates reproducible test scenarios based on application behavior
- Eliminates manual test case creation overhead
- Simulates realistic user interactions to capture authentic usage patterns
- Generates diverse interaction sequences for comprehensive coverage
- Mimics real-world user behavior patterns
- Collects detailed performance metrics with focus on CPU Retired Instructions
- Monitors system resources during application execution
- Captures fine-grained performance data for analysis
- Analyzes collected data to identify, quantify, and localize Phantom Rendering instances
- Provides function-level attribution of computational waste
- Generates actionable optimization recommendations
npm install
npm run build# Optional: Configure ubuntu-22.04 mirror for faster downloads
sed -i "s@http://.*security.ubuntu.com@http://mirrors.huaweicloud.com@g" /etc/apt/sources.list
sed -i "s@http://.*archive.ubuntu.com@http://mirrors.huaweicloud.com@g" /etc/apt/sources.list
# Optional: Configure ubuntu-24.04 mirror for faster downloads
sed -i "s@http://.*security.ubuntu.com@http://mirrors.huaweicloud.com@g" /etc/apt/sources.list.d/ubuntu.sources
sed -i "s@http://.*archive.ubuntu.com@http://mirrors.huaweicloud.com@g" /etc/apt/sources.list.d/ubuntu.sources
apt-get update && \
apt-get install -y \
git \
git-lfs \
python3 \
python3-pip \
python3-venv \
python3-dev
# Add Command Line Tools for HarmonyOS to PATH
# export command_line_tools=[Command Line Tools for HarmonyOS] directory
export PATH=$PATH:$command_line_tools/tool/node/bin:$command_line_tools/sdk/default/openharmony/toolchainsbrew install git git-lfs python@3.11
# Add Command Line Tools for HarmonyOS to PATH
# export command_line_tools=[Command Line Tools for HarmonyOS] directory
export PATH=$PATH:$command_line_tools/tool/node/bin:$command_line_tools/sdk/default/openharmony/toolchains# Initialize environment (only needed once)
git clone https://github.com/your-repo/phantom-rendering-detection
cd phantom-rendering-detection/
npm install
npm run build
# Activate the python virtual environment perf_testing/.venv
source activate.sh
# Configure test cases in config.yaml as needed
python -m scripts.main perf --run_testcases .*_example.*- pip > 23.0.1
- Python 3.9 ~ 3.12
- Command Line Tools for HarmonyOS > 5.0.5
- Node.js (for building the example application)
⚠️ Please make sure that the defaultpythoncommand in your terminal points to a valid Python interpreter in the 3.9 ~ 3.12 range.
python -m scripts.main perf [options]Key Options for Phantom Rendering Detection:
--run_testcases <patterns>: Run specific test cases (e.g.,.*_empty_frame.*)--devices <device_serial>: Target device for analysis--round <N>: Number of test rounds (default: 5)
Example Usage:
# Run phantom rendering detection on example app
python -m scripts.main perf --run_testcases .*_example.*
# Analyze specific empty frame patterns
python -m scripts.main perf --run_testcases .*_empty_frame.* --round 3The tool automatically generates comprehensive reports including:
- Phantom Rendering Frame Statistics: Quantitative analysis of phantom rendering occurrences
- Performance Impact: CPU/GPU usage during phantom rendering events
- Visual Timeline: Frame-by-frame analysis of rendering operations
- Optimization Recommendations: Actionable suggestions for reducing phantom rendering
- Phantom Rendering Frame Ratio: Percentage of frames with no visible content
- Resource Waste: CPU/GPU cycles consumed by phantom rendering
- Performance Impact: Measured impact on application responsiveness
- Green: Optimal rendering efficiency
- Yellow: Minor phantom rendering detected
- Red: Significant phantom rendering issues requiring attention
Configure phantom rendering detection in perf_testing/config.yaml:
run_testcases:
- .*_example.* # Run the phantom rendering example app tests
- .*_empty_frame.* # Focus on empty frame detection patterns
# Custom categories for phantom rendering analysis
kind:
-
name: 'UI_Rendering'
files:
- '.*\.ets$' # ArkTS UI files
- '.*ImageBrowsePage.*'
- '.*LikeInteractionPage.*'
- '.*CommentScrollPage.*'
threads:
- 'RenderThread'
- 'UI.*Thread'Create custom detection rules by extending the analysis framework:
- Define custom empty frame criteria
- Set performance thresholds
- Configure reporting preferences
- Customize visualization options
- Usage Guide - Detailed setup and usage instructions
- Tool Introduction - Comprehensive overview of detection capabilities
- Performance Test Analysis - Guide to interpreting results
The included example application demonstrates detection of:
- List View Phantom Rendering: Empty frames during scrolling operations
- Component Lifecycle Issues: Unnecessary renders during component updates
- State Transition Problems: Phantom rendering during state changes
- Resource Loading: Empty frames during asynchronous operations
Our tool specifically detects:
- Empty Container Renders: Components rendering without content
- Invisible Element Updates: Updates to off-screen or hidden elements
- Redundant Layout Operations: Unnecessary layout calculations
- Stale Frame Rendering: Rendering frames identical to previous ones
-
Build the example app:
cd example/ # Build using DevEco Studio or hvigor command line tools ./hvigorw assembleHap
-
Install and run the test app on device:
# Install the built HAP file to your HarmonyOS device hdc install entry/build/default/outputs/default/entry-default-signed.hap -
Run phantom rendering detection:
# Run specific example test cases python -m scripts.main perf --run_testcases .*_example.* # Run individual test scenarios python -m scripts.main perf --run_testcases ResourceUsage_PerformanceDynamic_example_combined
-
Analyze results: Check generated reports for phantom rendering insights and compare Phantom Rendering Frame Mode vs Normal Mode performance
HapPRDetection has been extensively evaluated and validated through comprehensive research:
- 22 commercial applications analyzed across different domains
- Phantom Rendering issues identified in real-world production apps
- Up to 26x computational overhead detected and quantified
- Diagnostic time reduced from hours to minutes
- CPU Retired Instructions used as stable, hardware-independent metric
- Energy consumption analysis through instruction-based measurements
- Function-level attribution enabling precise optimization targeting
- CI/CD integration for continuous performance monitoring
- Dual-thread architecture support (UI Thread + Render Service Thread)
- Native integration with OpenHarmony performance tooling
- Production-ready deployment in development workflows
This framework is the subject of the research paper:
"Phantom Rendering Detection: Identifying and Analyzing Unnecessary UI Computations in OpenHarmony Apps"
The paper presents the theoretical foundation, implementation details, and comprehensive evaluation of the HapPRDetection framework, demonstrating its effectiveness in detecting and resolving Phantom Rendering issues in modern mobile applications.
- Source Code: Available in this repository
- Framework: Open source under Apache License 2.0
- Platform: OpenHarmony / HarmonyOS applications
- Language: TypeScript, Python, ArkTS (OpenHarmony UI framework)
This project is licensed under the Apache License 2.0.
HapPRDetection: Advancing mobile application performance through automated Phantom Rendering detection and optimization.