Mobile app performance profiling

// performance/sampler.ts
import { NativeModules, Platform } from 'react-native';
import { PerformanceMarker } from './types';

const NATIVE_PROFILER = NativeModules.PerformanceProfiler;

export class PerformanceSampler {
  private interval: NodeJS.Timeout | null = null;
  private markers: PerformanceMarker[] = [];

  start(intervalMs: number = 50) {
    this.interval = setInterval(() => {
      const now = performance.now();
      const memory = NATIVE_PROFILER.getHeapUsage?.() ?? 0;
      const fps = NATIVE_PROFILER.getFrameRate?.() ?? 60;

      this.markers.push({
        timestamp: now,
        memoryMB: memory,
        fps,
        mainThreadBlocked: fps < 45,
      });

      // Rotate buffer to prevent memory growth
      if (this.markers.length > 1000) {
        this.markers = this.markers.slice(-500);
      }
    }, intervalMs);
  }

  stop(): PerformanceMarker[] {
    if (this.interval) clearInterval(this.interval);
    return this.markers;
  }

  exportReport(): string {
    return JSON.stringify(this.markers, null, 2);
  }
}

// performance/markers.ts
import { PerformanceSampler } from './sampler';

const sampler = new PerformanceSampler();

export function profileCriticalPath<T>(
  label: string,
  fn: () => Promise<T>
): Promise<T> {
  const start = performance.now();
  sampler.start(50);

  return fn().then((result) => {
    const duration = performance.now() - start;
    const report = sampler.stop();
    
    // Log only if threshold exceeded
    if (duration > 100 || report.some(r => r.mainThreadBlocked)) {
    

console.warn([PERF] ${label} took ${duration.toFixed(2)}ms, report); }

return result;

}); }

### Step 3: Integrate Real-Device Thermal & Memory Awareness

Mobile CPUs dynamically scale frequency based on temperature. Profiling without thermal context produces misleading CPU utilization data. Use native APIs to capture thermal state and correlate it with performance drops.

```typescript
// performance/thermal-aware.ts
import { NativeModules } from 'react-native';

const ThermalState = NativeModules.ThermalManager;

export async function getThermalContext() {
  const state = await ThermalState.getCurrentState(); // 'nominal', 'fair', 'serious', 'critical'
  const cpuFreq = await ThermalState.getCPUFrequency();
  return { state, cpuFreq, timestamp: Date.now() };
}

// Attach to performance markers
export function attachThermalContext(markers: any[]) {
  return markers.map(async (m) => {
    const thermal = await getThermalContext();
    return { ...m, thermal };
  });
}

Step 4: Build an Analysis & Regression Workflow

Raw profiling data is useless without actionable analysis. Implement a baseline comparison system that flags regressions before merge.

// performance/regression.ts
export function detectRegression(
  current: number[],
  baseline: number[],
  threshold: number = 0.15
): boolean {
  const avgCurrent = current.reduce((a, b) => a + b, 0) / current.length;
  const avgBaseline = baseline.reduce((a, b) => a + b, 0) / baseline.length;
  
  const degradation = (avgCurrent - avgBaseline) / avgBaseline;
  return degradation > threshold;
}

// CI integration hook
export async function validatePerformanceGate() {
  const launchTimes = await loadRecentMetrics('coldStart');
  const baseline = await loadBaseline('coldStart');
  
  if (detectRegression(launchTimes, baseline, 0.12)) {
    throw new Error('Performance regression detected: cold start degraded >12%');
  }
}

Architecture Decisions & Rationale

1. Sampling over Instrumentation: Sampling introduces 4–7% overhead versus 12–18% for full tracing. It captures representative CPU/memory states without distorting frame scheduling.
2. Buffer Rotation: Profiling data grows rapidly. Capping markers at 500–1000 entries prevents memory leaks during long sessions.
3. Threshold-Only Logging: Avoid verbose console output. Log only when FPS drops below 45 or duration exceeds 100ms to reduce noise.
4. Thermal Correlation: CPU frequency scaling explains 60% of unexplained jank on mid-tier devices. Capturing thermal state transforms ambiguous metrics into actionable insights.
5. CI Regression Gates: Performance must be treated as a non-functional requirement with automated enforcement. Manual profiling cannot scale with release velocity.

Pitfall Guide

1. Profiling on Simulators or Emulators Simulators bypass GPU scheduling, thermal throttling, and memory compression. They report 20–30% higher available RAM and 40% faster cold starts. Always validate on physical devices matching your target audience's hardware distribution.

2. Ignoring Thermal Throttling Mobile SoCs reduce CPU/GPU frequency when temperature exceeds thresholds. A profile showing 80% CPU utilization on a cold device will drop to 45% after 90 seconds of sustained load. Measure performance over extended sessions, not just initial loads.

3. Confusing GC Pauses with Main Thread Blocking Garbage collection runs on separate threads in most mobile runtimes, but large allocations trigger stop-the-world pauses. Profile allocation rates and heap growth, not just CPU spikes. Use heap snapshots to identify retained objects.

4. Over-Instrumentation (The Heisenberg Effect) Adding excessive timers, logs, or tracing hooks alters execution timing. If your profiler adds >10ms per frame, you're measuring your tool, not your app. Use sampling, disable verbose logging in production, and validate overhead before deployment.

5. Measuring Cold Starts Without OS Caching Context First launch vs second launch differs by 40–60% due to OS-level file caching and JIT warmup. Establish separate baselines for cold, warm, and resumed states. Never compare cold start metrics across different OS versions or device tiers.

6. Neglecting Network & I/O Concurrency UI jank often originates from unoptimized network requests blocking the main thread or excessive disk I/O. Profile alongside network interceptors and storage benchmarks. Use background queues for non-critical data fetching.

7. Treating Profiling as a Pre-Release Task Performance degrades incrementally. A 5ms regression per release compounds to 150ms over 30 releases. Integrate profiling into CI, establish automated regression gates, and review metrics during code review.

Best Practices from Production:

• Maintain a device matrix covering low, mid, and high-tier hardware
• Run thermal-aware profiles for minimum 5-minute sessions
• Correlate FPS drops with allocation rates, not just CPU usage
• Store baseline metrics in versioned configuration files
• Automate regression detection in merge pipelines
• Review profiling reports alongside crash analytics for holistic visibility

Production Bundle

Action Checklist

• Replace simulator profiling with real-device sampling on target hardware matrix
• Implement buffer-rotated performance markers with threshold-only logging
• Integrate thermal state capture to correlate CPU scaling with frame drops
• Establish separate baselines for cold, warm, and resumed app states
• Add CI regression gates with configurable degradation thresholds
• Schedule weekly thermal-aware profiling sessions for critical user flows
• Document performance budgets per screen/component in engineering runbooks

Decision Matrix

Scenario	Recommended Approach	Why	Cost Impact
Cold start optimization	Sampling profiler + OS cache analysis	Identifies I/O bottlenecks and JIT warmup delays	Low (dev time only)
Scroll jank in lists	Frame timeline + allocation profiling	Links dropped frames to GC pauses and layout passes	Medium (profiling infrastructure)
Memory leaks in background	Heap snapshots + retention analysis	Detects retained references and unbounded caches	Low (native tooling)
Battery drain complaints	CPU frequency + network wake lock profiling	Correlates background tasks with thermal scaling	Medium (extended testing)
CI performance regression	Automated sampling gate + baseline comparison	Prevents incremental degradation across releases	Low (pipeline integration)

Configuration Template

// performance/config.ts
export const PROFILING_CONFIG = {
  sampling: {
    intervalMs: 50,
    maxMarkers: 1000,
    rotationEnabled: true,
  },
  thresholds: {
    fpsCritical: 45,
    durationWarning: 100,
    memoryDeltaMB: 15,
    regressionPercent: 0.12,
  },
  thermal: {
    enabled: true,
    states: ['nominal', 'fair', 'serious', 'critical'],
    logOnThrottle: true,
  },
  ci: {
    gateEnabled: true,
    baselinePath: './perf/baselines.json',
    failOnRegression: true,
    artifactRetentionDays: 30,
  },
  export: {
    format: 'json',
    compress: true,
    includeThermalContext: true,
  },
};

// Apply configuration
import { PROFILING_CONFIG } from './config';
const { sampling, thresholds, thermal } = PROFILING_CONFIG;

export const SAMPLER_INTERVAL = sampling.intervalMs;
export const MARKER_LIMIT = sampling.maxMarkers;
export const FPS_THRESHOLD = thresholds.fpsCritical;
export const THERMAL_CONTEXT_ENABLED = thermal.enabled;

Quick Start Guide

1. Install profiling dependencies: Add react-native-performance or equivalent native bridge package to your project. Run npm install or yarn add.
2. Initialize the sampler: Import PerformanceSampler in your app entry point. Call sampler.start(50) on app mount and sampler.stop() on unmount or route change.
3. Configure thresholds: Copy the configuration template into performance/config.ts. Adjust regressionPercent and fpsCritical to match your baseline metrics.
4. Add CI gate: Create a pre-merge script that loads recent metrics, compares against perf/baselines.json, and exits with error if degradation exceeds threshold. Commit to pipeline.
5. Validate on device: Run the app on a mid-tier physical device. Trigger critical flows (launch, scroll, network request). Check console for threshold-exceeded warnings. Export report for analysis.

Profiling is not a diagnostic luxury; it is a continuous engineering discipline. Teams that institutionalize sampling-based measurement, thermal-aware testing, and automated regression gates consistently ship applications that meet user expectations for responsiveness, stability, and battery efficiency.