Profiling JavaScript performance
Use the Profiler in F12 developer tools to get detailed performance measurements of the JavaScript in your webpages.
Profiling your script
The Profiler shows you the JavaScript functions your webpage runs during a profiling session. It includes details about the number of times they were run, the time each took to run, relationships between parent and child functions, and more.
To begin profiling, open the page you want to profile in Internet Explorer 11. Press F12 to open F12 tools, and select the Profiler tool.
When you first open the Profiler tool, the grid will be empty. To generate a report, click the Start profiling button or press F5, and then run the code that you want profiled. Click Stop profiling or press SHIFT + F5 to end the session and generate a report. For example, to profile what happens when a button is clicked, click Start profiling, click the button, and then click Stop profiling when the result of the click has completed.
Precision Profiling
You can also start and stop profiling from within your code, using the the Console API. The console.profile() and console.profileEnd() methods give you the ability to start and stop the Profiler at exact points in your code.
Viewing profile reports
Each profiler session generates a discrete report that is not overwritten by the next, so you can run multiple profiling sessions on a single page. The most current profiler report is displayed by default, and you can click the Current report drop-down list to see others.
Reports can be viewed two ways, either in Functions or Call Tree views. Functions view shows all the functions in a flat list. The Call Tree view shows nested parent-child relationships between functions.
.png)
Profile data types
The profiler returns up to 13 columns of data from your profile, adding a new Worker ID column in IE11 to show when functions are being run by Web Workers. In the report, you can right-click the top of any column and add or remove columns. You see the default column selection in the image above. You can see the Profiler with all columns visible next.
.png)
This table shows the available data categories in the Profiler tool.
| Column heading | What it shows |
|---|---|
| Function | The name of the function being profiled. |
| Count | The total number of times this function was called. |
| Inclusive time (ms) | The amount of run time that passed while within that function. This includes the time spent in child or external functions called from that function. |
| Inclusive time % | The percentage of run time that passed while within that function. This includes the time spent in child or external functions called from that function. |
| Exclusive time (ms) | The amount of run time that passed while within that function. This excludes the time spent in child or external functions called from that function. |
| Exclusive time % | The percentage of run time that passed while within that function. This excludes the time spent in child or external functions called from that function. |
| Avg time (ms) | The average time spent in this function and its children and external functions. |
| Max time (ms) | The maximum time spent in this function and its children and external functions. |
| Min time (ms) | The minimum time spent in this function and its children and external functions. |
| Function type | Type of function - DOM, user, build-in. |
| URL | The URL of the source file where this function is defined. |
| Line number | The line number for the beginning of this function in the source code. |
| Worker Id | An identifier representing a web worker that is running the particular function. |
Inclusive and exclusive times can indicate some problems in the code. Inclusive time provides the total time of the function, and any functions called or called by its children. Exclusive time shows only the time actually spent inside that specific function. It's possible to have a very high inclusive time on a function, but the exclusive time is minimal. For example:
function boringone() {
// do some work for 250 milliseconds
}
function funone() {
// do some work for 200 milliseconds and then call boringone()
boringone();
}
function main() {
//do some work for 50 milliseconds then call funone()
funone();
}
In this example, the function "main()" is called, which works for 50 milliseconds, then calls "funone()", which takes 200 milliseconds, and then calls "boringone()", which works for 250 milliseconds before it's done. This chart shows the values that inclusive and exclusive times might show.
| Function | Inclusive time | Exclusive time |
|---|---|---|
| main() | 500ms | 50ms |
| funone() | 450ms | 200ms |
| boringone() | 250ms | 250ms |
Inclusive time for each function is the time that the function takes to run, plus all the time the functions that follow it (children) take to run. Exclusive time is only the current function's time. The "boringone()" function, as the last one in the chain, shows the same time for both.
Searching and sorting reports
Searching for functions
You can search for specific functions in reports with the Search box at the top of the Profiler tool, grouped with the Start profiling and Export data buttons.
Type all or part of a name into the Search box, then click the Search button or press Enter. All instances of the keyword are highlighted, and the report scrolls to the first occurrence. You can navigate between the matches by pressing Enter or F3 to move to the next match, and Shift + Enter or Shift + F3 for a previous match.
Sorting by columns
You can sort column the same way you sort and Excel spreadsheet or Word table.
When you sort in the Call tree report view, only the values at the top level functions are sorted. The child functions stay in their hierarchy order.
Copying and saving reports
To export directly to a comma-delimited (.csv) file, click the Export data icon (next to Start profiling button). The export function saves all rows, including the headings, while copy and paste only includes the selected rows, with no headings.