Analyzing JavaScript performance data in Windows Store apps

  • Article

This topic describes the performance data for JavaScript code that is presented in the report views of the Microsoft Visual Studio Express 2012 for Windows 8 profiling tool. To collect JavaScript performance data, see one of these topics:

In this topic

This topic contains the following sections:

Viewing performance reports

Types of profiling data

Types of profiling report views

Profiling report views

  • Summary view

  • Function Details view

  • Call Tree view

  • Caller / Callee view

  • Modules and Functions views

Customizing data grid views

Open the profiling report file

When you stop a profiling run from the Visual Studio IDE, the performance data is automatically displayed in a document.

To open a profiling report (.vspx) file that was generated by the VSPerf command line tool or that was saved after a previous profiling run, do this:

  1. If necessary, open Visual Studio.

  2. On the File menu, choose Open File.

  3. In the Open File dialog box, navigate to the folder containing the profiling report file and then choose the report file.

Types of profiling data

Profiling data for a function includes total, average, minimum, and maximum time and percentages. The data is calculated for two sets of timing values:

  • Elapsed Inclusive values are the total amount of time a function took to execute.

  • Elapsed Exclusive values are the amount of time a function spent executing only its own code. The values do not include time spent in child functions.

Types of profiling report views

Profiling report views display data in two ways:

  • Call graph views show you information about functions in the context of execution paths. The Hot Path tree on the Summary window shows the execution path in which your application cumulatively spent the most time during the profiling run. The Call Tree view is a call graph for all the functions in the profiling run. The Function Details and Caller/Callee views focus on a selected function, displaying the functions that called the selected function, and the functions that it called. Call graph views help you to find performance issues in your algorithms

  • Function list views sort and list functions by a selected data column. The Functions With Most Individual Work list on the Summary page shows you the functions that spent the most time executing their own code, excluding the time that the function was calling child functions. The Modules view groups functions by source file for JavaScript code, and by module for other languages. The Functions view is a single list of functions.

Profiling report views

Hh780915.collapse_all(en-us,VS.110).gifSummary view

The Summary page gives you two views of the profiling data that can often point you to the best candidates for performance optimization.

  • The Hot Path tree shows you the call stack in which your application cumulatively spent the most time during the profiling run. Understanding the reason that this algorithm takes up so much time can lead to an optimization.

  • The Functions With Most Individual Work list presents the ten functions that used the most exclusive time. You can achieve quick and significant performance gains by optimizing the function code or reducing the number of times these functions are called.

Hh780915.collapse_all(en-us,VS.110).gifFunction Details view

The Cost Distribution bar chart represents the relationships between a function that you select and the calling functions that executed the selected function, and between the selected function and the functions that were called by it.

  • The Calling Functions bar shows the functions that called the selected function. The size of a calling function block indicates the percentage of the total execution time of the selected function that was caused by the calling function.

  • The Selected Function bar indicates the relative amount of the total execution time that the selected function spent executing its own code (the Function Body block) and the amount of time spent executing functions called by the selected function.

  • The Called Functions bar shows the functions that were called by the selected function. The size of a called function block indicates the percentage of the total execution time of the called function that was spent in the called function.

Hh780915.collapse_all(en-us,VS.110).gifCall Tree view

You can use the Call Tree view to explore the function execution paths that were traversed in your app. The root of the tree is the entry point into the app. Each function node lists all the functions that it called and performance data about those function calls. The function values in the Call Tree view are for the function instances that were called by the parent function in the call tree. Percentage values are the ratio of the time of the function instances value to the total execution time of the profiling run.

To focus on one node of the Call Tree view, select the node and then choose Set Root on the shortcut menu. When you set the root node, you eliminate all other entries from the view except the subtree of the selected node. To reset the root node back to the original node, choose Reset Root on the shortcut menu.

Call Tree view columns

Column name

Description

Number of Calls

The number of calls to the function by the parent function in the call tree.

Elapsed Inclusive Time %

The total percentage of execution time spent running this function.

Elapsed Exclusive Time %

The total percentage of execution time spent running the body of a function. This excludes time spent in functions called by the function.

Avg Elapsed Inclusive Time

The average time spent running this function.

Avg Elapsed Exclusive Time

The average time spent running this function. This excludes time spent in functions called by the function.

Module Name

For JavaScript functions, the name of the source file that contains the function. Otherwise, the name of the module (.dll or .exe) that contains the function.

Hh780915.collapse_all(en-us,VS.110).gifCaller / Callee view

The Caller/Callee view is a tree representation of the data in the Function Details Cost Distribution bar chart of the Summary view that includes all timing details. Use the Caller / Callee view to investigate the relationship between a selected function and the functions that called it and the function that it called. The Caller / Callee view is made up of three grids.

The Current function that is displayed in the middle grid displays profiling information about the selected function. The values include all calls to the function. The Functions that called the current function are displayed in the top grid and the Functions that were called by the current function are displayed in the bottom grid. The values of the current function are the totals from all calls to the function. The values of the calling and called functions include only the time that was spent calling or being called by the selected function.

To navigate the call trees of a function, double-click a calling or a called function. The function that you double-click becomes the new selected function. Its callers and called functions are now visible.

Caller/Callee view columns

Column name

Description

Number of Calls

  • For the selected function, the total number of calls to the function in the profiling run.

  • For a calling function, the number of calls made to the selected function by the calling function.

  • For a called function, the number of calls made to the called function by the selected function.

Elapsed Inclusive Time %

  • For the selected function, percentage of the total execution time of the profiling run that was consumed by the selected function. The value includes the time spent in functions that were called by the selected function.

  • For a calling function, the percentage of the total execution time of the profiling run that was consumed by instances of the calling function that called the selected function.

  • For a called function, the percentage of the total execution time of the profiling run that was consumed by instances of the called function that were called the selected function.

Elapsed Exclusive Time %

  • For the selected function, percentage of the total execution time of the profiling run that was consumed by the selected function. The value excludes the time spent in functions that were called by the selected function.

  • For a calling function, the percentage of the total execution time of the profiling run that was consumed by instances of the calling function that called the selected function, including the time that was spent in functions called by the calling function.

  • For a called function, the percentage of the total execution time of the profiling run that was consumed by instances of the called function that were called the selected function, including the time that was spent in functions that were called by the called function.

Avg Elapsed Inclusive Time

  • For the selected function, the average time of all instances of the selected function.

  • For a calling function, the average time of all instances of the calling function that called the selected function.

  • For a called function, the average time of all instances of the called function that were called by the selected function.

Avg Elapsed Exclusive Time

  • For the selected function, the average time of all instances of the selected function. This value excludes the time spent in functions that were called by the selected function.

  • For a calling function, the average time of all instances of the calling function that called the selected function, excluding the time spent in functions called by the calling function.

  • For a called function, the average time of all instances of the called function that were called by the selected function, excluding the time spent in functions called by the called function.

Module Name

For JavaScript functions, the name of the source file that contains the function. Otherwise, the name of the module (.dll or .exe) that contains the function.

Hh780915.collapse_all(en-us,VS.110).gifModules and Functions views

The Modules and Functions views display the details of the profiling data for the functions in the profiling report. The Modules view organizes the JavaScript functions by the .js source file that contains them. Other functions are listed by the module, such as a .dll. The Function view lists all functions without using a hierarchy. Finding your own code in the Modules view is often easier than the Functions view, but you might find it easier to compare functions in the Functions view.

Modules and Functions views columns

Column name

Description

Number of Calls

The number of calls to the function.

Elapsed Inclusive Time %

The percentage of the total execution time in the profiling run that was spent executing the function.

Elapsed Exclusive Time %

The percentage of the total execution time that was spent executing the function. This value excludes the time spent in functions that were called by the function.

Avg Elapsed Inclusive Time

The average execution time of the function.

Avg Elapsed Exclusive Time

The average execution time of the function. This value excludes the time spent in functions called by the function.

Module Name

For JavaScript functions, the name of the source file that contains the function. Otherwise, the name of the module (.dll or .exe) that contains the function.

Customizing data grid views

You can add or remove data columns and change the order in which the columns are displayed. Right-click a data row and choose Add/Remove Columns.

Note

When the instrumentation method is used for managed and native code, additional information about code execution is collected and presented in the Application Inclusive, and Application Exclusive timing fields. This information is not available in JavaScript, so the Application values are the same as Elapsed values. We do not recommend adding these fields to a view.

Additional profiling data columns

Column name

Description

Function Name

The name of the function.

Function Address

The address of the function.

Function Line Number

The line number of the start of this function in the source file.

Number of Calls

The total number of calls that are made to this function.

Source File

The source file that contains the definition for this function.

Module Name

The name of the module that contains the function.

Module Path

The path of the module that contains the function.

Process ID

The process ID (PID) of the profiling run.

Process Name

The name of the process.

Time Exclusive Probe Overhead

The time overhead for this function that is caused by instrumentation. It doesn’t include overhead in functions that were called by the function. Probe overhead has been subtracted from all exclusive times.

Time Inclusive Probe Overhead

The time overhead for this function and its child functions that is caused by instrumentation. It does include overhead in functions that were called by the function. Probe overhead has been subtracted from all inclusive times.

Elapsed Exclusive Time

The total elapsed exclusive time of all calls to this function.

Max Elapsed Exclusive Time

The maximum elapsed exclusive time of a call to this function.

Min Elapsed Exclusive Time

The minimum elapsed exclusive time of a call to this function.

Elapsed Inclusive Time

The total elapsed inclusive time of all calls to this function.

Max Elapsed Inclusive Time

The maximum elapsed inclusive time of a call to this function.

Min Elapsed Inclusive Time

The minimum elapsed inclusive time of a call to this function.