Ultimate Apache Weex UX Testing Guide: 10 Key Metrics and Optimization Tips

Apache Weex is a cross‑platform mobile development framework, and its user‑experience (UX) testing and performance optimization are essential for successful apps. The article defines UX testing as systematic monitoring and analysis of Weex apps on iOS and Android, covering load speed, rendering performance, and interaction response.

Built‑in Performance Monitoring

Weex provides a comprehensive monitoring system that automatically collects key performance indicators:

Page load performance: tracks the whole process from page initialization to full rendering.

Interaction performance: measures response times for user actions.

Key metrics include: WXPTJSDownload – JavaScript file download time WXPTJSCreateInstance – JS instance creation time WXPTFirstScreenRender – First‑screen render completion time WXPTAllRender – Full page render time WXPTInteractionTime – User interaction response time

Platform‑Specific Monitoring Modules

iOS : The WXMonitor class in the iOS SDK offers full‑stack performance monitoring. The performance tags are defined as:

typedef enum : NSUInteger {
    WXPTJSDownload,          // JS download time
    WXPTJSCreateInstance,    // Instance creation time
    WXPTFirstScreenRender,   // First‑screen render time
    WXPTAllRender,           // Full render time
    WXPTInteractionTime      // Interaction response time
} WXPerformanceTag;

Android : The WXInstanceApm class provides instance‑level analysis, exposing constants such as WEEX_PAGE_TOPIC and monitoring error codes and performance metrics.

public class WXInstanceApm {
    public static final String WEEX_PAGE_TOPIC = "weex_page";
    // Monitor error codes, performance metrics, etc.
}

10 Key UX Testing Techniques

First‑Screen Load Optimization – Focus on WXPTFirstScreenRender, monitor JS download and parsing, streamline component initialization, and eliminate unnecessary resource loads.

Image Processing Performance – Use the image‑resize test module to verify rendering quality across different container sizes.

Layout Rendering Performance – Test border styles to assess Weex’s layout rendering capabilities.

Memory Usage Monitoring – Continuously track memory consumption via WXMonitor to detect leaks.

Network Request Optimization – Monitor WXPTFsReqNetNum to fine‑tune request frequency and timing.

Component Creation Performance – Track WXPTComponentCreateTime to ensure component creation does not become a bottleneck.

Timer Performance Testing – Example test case:

// Timer module test example
it('SetTimeOut', () => {
    return driver
        .waitForElementById("interval", 1000)
        .elementById('setTimeout')
        .click();
});

Error Monitoring and Recovery – Use WXErrorCode to capture errors and implement quick recovery mechanisms.

Cross‑Platform Consistency Verification – Run identical test cases on both iOS and Android to ensure a uniform user experience.

Continuous Performance Monitoring – Establish automated test pipelines that continuously track performance changes.

Test Environment and Script Organization

Test scripts are placed under test/scripts/:

Module tests: modules/timer.test.js Component tests: various files under components/ CSS style tests: verify borders, shadows, and other visual effects.

Performance Optimization Best Practices

Code splitting and lazy loading – break large apps into smaller modules and load on demand to improve first‑screen speed.

Image resource optimization – choose appropriate formats and sizes, implement lazy loading, and monitor load errors and timeouts.

Cache strategy optimization – configure JavaScript and asset caches, enable incremental updates, and fine‑tune cache invalidation policies.

Conclusion

Weex UX testing is a systematic engineering effort that requires comprehensive evaluation across multiple dimensions. By applying the ten key testing techniques and optimization methods described, developers can build a complete monitoring system, discover and resolve performance issues, enhance user satisfaction, and ensure consistent cross‑platform experiences.