Analyzing Render Performance with Developer Tools
The performance tab in the developer tools kit can be daunting. Let's demystify it in this lesson!
We'll cover the following...
Data
In the last lesson, we opened up developer tools, recorded an animation, and got some data. What we ended up seeing is something like this. We’ll break this down into digestible chunks and explain everything step-by-step in this lesson.
We’ll start from the top chart and work our way to the last one.
The x-axis for all of these represents time. Notice the very first bar that appears at the top in the screenshot above. It shows the time in milliseconds of your recording. All the panels capture data about a certain point in time, including screenshots of the app/website at that time. This is sort of like a CCTV video of your app, and you’re like a detective trying to find clues!
FPS / CPU / NET
Frames per second
Look at the FPS chart. Whenever you see a red bar above FPS, it means that the framerate dropped so low that it’s probably harming the user experience. In general, the higher the green bar, the higher the FPS.
CPU
Below the FPS chart, you see the CPU chart. ...