To identify expensive functions, use the Memory tool.
Record exactly which functions were called and how much memory each requires with Allocation Sampling in the Memory tool.
Visualize your profiles as a flame chart.
Record a Sampling Profile
In DevTools, go to the Memory tool.
Click the Allocation sampling option button.
Depending on what you are trying to analyze, you can either refresh the page, interact with the page, or just let the page run.
When you're finished, click the Stop button.
You can also use the Console Utilities API to record and group profiles from the command line.
View Sampling Profile
When you finish recording, DevTools automatically populates the Memory panel under SAMPLING PROFILES with the data from your recording.
The default view is Heavy (Bottom Up). This view allows you to review which functions had the most impact on performance and examine the requesting path for each function.
Change sort order
To change the sorting order, select the dropdown menu next to the focus selected function () icon and then select one of the following options:
Chart. Displays a chronological chart of the recording.
Heavy (Bottom Up). Lists functions by impact on performance and enables you to examine the calling paths to the functions. This is the default view.
Tree (Top Down). Shows an overall picture of the calling structure, starting at the top of the call stack.
To exclude a function from your Sampling Profile, select it and then click the exclude selected function () button. The requesting function (parent) of the excluded function (child) is charged with the allocated memory assigned to the excluded function (child).
Click the restore all functions () button to restore all excluded functions back into the recording.
View Sampling Profile as Chart
The Chart view provides a visual representation of the Sampling Profile over time.
The flame chart is split into two parts:
|1||Overview||A birds-eye view of the entire recording. The height of the bars correspond to the depth of the call stack. So, the higher the bar, the deeper the call stack.|
|2||Call Stacks||This is an in-depth view of the functions that were called during the recording. The horizontal axis is time and vertical axis is the call stack. The stacks are organized top-down. So, the function on top called the one below it, and so on.|
Functions are colored randomly. There is no correlation to the colors used in the other panels. However, functions are always colored the same across invocations, so that you can observe patterns in each runtime.
A tall call stack isn't necessarily significant; it might just mean that a lot of functions were called. But a wide bar means that a function took a long time to complete, so these are candidates for optimization.
Zoom in on specific parts of recording
To zoom in on particular parts of the call stack, click and drag left and right across the overview. After you zoom, the call stack automatically displays the portion of the recording that you selected.
View function details
Click a function, to view it in the Sources tool.
Hover on a function to display the name and timing data:
|Name||The name of the function.|
|Self size||The size of the current invocation of the function, including only the statements in the function.|
|Total size||The size of the current invocation of this function and any functions that it called.|
|URL||The location of the function definition in the form of
Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) and Meggin Kearney (Technical Writer).
This work is licensed under a Creative Commons Attribution 4.0 International License.