Profiling

Vega provides two ways to profile your apps: the built-in profiler and the Chrome profiler.

The Vega Visual Extension provides access to the Vega built-in profiler. Use the built-in profiler to get a side-by-side view of work done in the JavaScript thread and main thread. To use the profiler, open the Debug menu and select Show Perf Monitor.

The Chrome profiler provides a way to profile JavaScript when debugging. The Chrome profiler provides a general idea of where bottlenecks might be, but doesn't provide precise results because the code runs in Chrome.

Profiling Vega app performance

The Vega SDK provides dedicated profiling and performance tools through Vega Studio. Unlike Android's systrace, Vega uses its own tooling to collect and analyze traces for your app.

The following sections describe the profiling tools available for Vega apps.

CPU and activity monitoring

The following topics provide information about how to use the Activity Monitor in Vega Studio to track real-time CPU usage, record profiling sessions, and identify hot functions with flamegraphs:

• Monitor CPU Usage — Real-time CPU metrics, recording, hot functions, flamegraphs, and call trees.
• Use Flashlight to Monitor Activity — Lightweight activity monitoring.
• Investigate JavaScript Thread Performance — Analyze JS thread states and identify bottlenecks.
• Inspect Traces in Vega Apps — Add custom trace points with Systrace and analyze them in Perfetto.

Memory profiling

The following topics provide information about how to monitor your app's memory consumption and investigate JavaScript heap issues:

• Monitor and Record Memory — Track PSS, USS, and JS Heap usage over time.
• Investigate JavaScript Memory — Diagnose JS heap overflows and analyze heap snapshots with Memlab or Chrome DevTools.
• Detect Memory Leaks — Identify and resolve memory leaks.

UI and video fluidity

The following topics help you measure and optimize UI fluidity for smooth scrolling and animations:

• Measure Fluidity and Foreground Memory — Establish baseline fluidity KPI measurements.
• Investigate UI Fluidity Issues — Step-by-step process to identify and resolve fluidity issues.
• Identify UI Rendering Issues — Analyze fluidity graphs, CPU profiles, and Perfetto traces to find rendering bottlenecks.
• Investigate Component Re-rendering Issues — Use why-did-you-render to detect unnecessary React re-renders.
• Detect Overdraw — Find and eliminate unnecessary pixel redraws.
• Use React DevTools to Inspect Component Rendering — Profile component rendering with React DevTools.

Chrome DevTools

The following topic provides information about using Chrome DevTools on Vega:

• Use Chrome DevTools for App Profiling — Set up Chrome DevTools debugging in Vega Studio for memory profiling, breakpoints, and performance analysis.

General performance guidance

The following topics cover optimization strategies, common questions, and key metrics for Vega apps:

• App Performance Best Practices — Optimization guidelines for Vega apps.
• App Performance FAQ — Common performance questions and answers.
• Measure App KPIs — Measure key performance indicators including launch time, fluidity, and memory.
• Avoid Overdraw in Your App — Techniques to reduce overdraw.
• Improve App Performance with Concurrent Rendering — Leverage React concurrent features for better performance.

---

Last updated: Mar 30, 2026