Performance Monitoring and Optimization for React Native Applications at Qunar

Background: React Native adoption at Qunar has grown rapidly, but its ecosystem lacks mature tools for architecture, performance quality, and auxiliary facilities, especially for performance monitoring that works across native and web methods.

Problems addressed: (1) Performance is hard to quantify, leading to delayed optimizations; (2) Developers often lack deep performance knowledge of React Native.

Design Goals and Decomposition

Objective performance evaluation that is quantifiable.

Automated detection of performance defects.

Decision‑support for issue localization.

The solution consists of four stages: identify performance‑related data dimensions, record samples (locally or via external protocol), perform automated analysis on instantaneous and period samples, and provide feedback through logs and visual reports.

Key Performance Indicators

MRT (Message Response Timeliness)

GCP (Graphics Command Latency)

Redundant render detection (SCU optimization)

Render frame rate vs. logical frame rate

Critical thread CPU load

Memory usage

Network traffic consumption

Data Collection and Analysis

Real‑time sampling modules capture metrics such as MRT, GCP, and frame rates. Samples can be stored on‑device or streamed to external systems. Automated analysis detects anomalies and generates alerts, which are output to developer logs and visual dashboards.

Sample Code for Automated Tracing

@tracePerf({ expectedTimeCost: 200, strict: true })
async function invokeHeavyThingsXXX() {
  const result = await hotdog.invoke(...);
  await parallel.compute(result);
}

Optimization Strategies

MRT Optimization: Reduce native/JS interop frequency, minimize native module thread backlog, and avoid JS thread task accumulation.

SCU (shouldComponentUpdate) Optimization: Deep‑diff props/state in hook components, provide recommendations for redundant renders, and estimate optimization gains.

Render & Logic Frame Rate: Detect continuous frame drops and low P80 frame rates; monitor VSYNC‑based submission of JS‑generated view operations.

Execution Time Limits: Use AOP‑style decorators to trace synchronous and asynchronous functions, ensuring they meet expected time budgets.

Additional Monitoring

CPU load on critical threads (JS, native_module, UI).

Memory consumption (VM heap, native heap, low‑memory warnings).

Network traffic spikes.

Visualization and Integration

Developers can view real‑time performance dashboards, receive automated alerts, and obtain optimization suggestions, enabling early detection of performance defects during development and testing. The APM SDK works with any React Native or QRN‑based app with minimal configuration.

Future Directions

Open architecture separating core APM logic from samplers, profilers, and output plugins.

Extended output modules, standardized performance rating, and QA integration.

Offload parts of the APM itself to native code to reduce JS thread overhead.