Recording Performance Data Using Developer Tools
Explore how to use browser developer tools to record performance data during runtime, analyze JavaScript and rendering efficiency, and identify performance bottlenecks by testing an interactive example app. This lesson helps you understand practical methods to monitor and improve browser rendering performance.
We'll cover the following...
📝 This lesson is based on Chrome Version 85, so there might be slight differences, but the overall process should be similar from browser to browser and version to version.
Runtime performance is how your page performs when it is running, as opposed to when it is loading. We’ll load a given app in this lesson and actually get to take a close look at how all the runtime steps, such as JavaScript, styling, and painting happen in the real world.
Run the example app
We’ll use the following code example to study performance. Click ‘run’ ...