Performance and animations
Frame rates, dropped frames, slow React commits and what the JS thread did, recorded with the picture; slow motion and a list of the app's animations.
The window's Performance tab (in the Device panel) and the agent's app_data { source: "perf" } read the running app in development. Nothing is added to your app: the numbers are read through the debugger, and on Android from the system.
The numbers
| Number | Where it comes from |
|---|---|
| JS frames a second, the longest gap, long tasks | A small sampler Parallax puts into the app while the tab shows (removed on reload, and 10 s after the last look) |
| React commits a second, the slowest commits and their components | React's development build times every commit |
| UI frames a second (Android) | dumpsys gfxinfo: the system's own frame counters |
| UI frames a second (iOS) | Only with the optional add-on below. Without it the tab says so and shows no number: Parallax never estimates it |
| What the JS thread did | Hermes's sampling profiler during a recording ("With profile"), the top functions with file and line |
The window's own live picture costs the app some JS frames on a busy Mac; compare numbers taken the same way.
Record
Record 5 s / 10 s / 30 s ends in a report: a verdict and the likely cause (JS busy, React rendering, the UI thread), a timeline with the JS gaps, long tasks, commits, UI drops and the picture's frames, the slowest components (a click selects the component in the Inspector, else opens its file), and Hermes's top functions (a click opens the editor). Attach to message gives the agent the report's text.
The same recording keeps the picture: the player under the timeline steps one frame at a time (arrow keys), scrubs and plays at 0.1x to 1x, with each frame's time and the gap since the one before. Save frames writes a range as PNGs; Attach frame attaches one. On an Android emulator the screen sends a frame only when something changes, so a gap there can be a still screen.
The agent records the same way:
app_data { source: "perf" } // the recordings
app_data { source: "perf", record: 10 } // record 10 s (2 to 30) and answer with the report
app_data { source: "perf", id: "..." } // one reportSlow motion and the list of animations
Under the recordings: speed 0.1x to 1x, Pause and Step (one frame) for Animated animations that run on the JS thread and for requestAnimationFrame code. Your app's clock is not changed: timers and requests keep real time. Animations with useNativeDriver: true and Reanimated run on the UI thread and are not affected; use Record and step through the picture for them.
The list shows the animations that ran since the panel opened: type, duration, from and to, JS or native driver, and where it was started. Restart runs one again. An animation that started before the panel opened is not listed: reload the app with the panel open. The agent reads the list with app_data { source: "anim" }.
The iOS UI frame rate: the optional add-on
iOS gives a simulator app's frame times to no outside tool, so the exact number needs a small native package in your app, development builds only:
npm install -D @parallax-rn/perf-native@<version> # the same version as the server
cd ios && pod installIn the app's entry, next to the SDK: if (__DEV__) { require('@parallax-rn/perf-native'); }, then rebuild. In a release build it does nothing: the JS side installs only in development, and the native side starts only in a Debug build.