Our volunteers haven't translated this article into Lingála yet. Join us and help get the job done!
The Performance tool gives you insight into your site's general responsiveness, JavaScript and layout performance. With the Performance tool you create a recording, or profile, of your site over a period of time. The tool then shows you an overview of the things the browser was doing to render your site over the profile, and a graph of the frame rate over the profile.
You get four sub-tools to examine aspects of the profile in more detail:
- the Waterfall shows the different operations the browser was performing, such as executing layout, JavaScript, repaints, and garbage collection
- the Call Tree shows the JavaScript functions in which the browser spent most of its time
- the Flame Chart shows the JavaScript call stack over the course of the recording
- the Allocations view shows the heap allocations made by your code over the course of the recording. This view only appears if you checked "Record Allocations" in the Performance tool settings.
Getting started
- UI Tour
-
To find your way around the Performance tool, here's a quick tour of the UI.
- How to
- Basic tasks: open the tool, create, save, load, and configure recordings
Components of the Performance tool
- Frame rate
- Understand your site's overall responsiveness.
- Call Tree
- Find bottlenecks in your site's JavaScript.
- Allocations
- See the allocations made by your code over the course of the recording.
- Waterfall
- Understand the work the browser's doing as the user interacts with your site.
- Flame Chart
- See which JavaScript functions are executing, and when, over the course of the recording.
Scenarios
- Animating CSS properties
- Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.
- Intensive JavaScript
- Uses the frame rate and Waterfall tools to highlight performance problems caused by long-running JavaScript, and how using workers can help in this situation.