How to profile performance

 

Option1: Use the Developer Tools of the Browser

For example, with Chrome, you can open the developer tools by pressing Ctrl+Shift+I. Then, click the Profiles tab, and click the round record button ("Start CPU profiling") located in the top-left corner of the developer tools. You can press F5 to reload the page. Then, press the round button again to stop the profiling. You can use the drop-down menu to switch between "Chart", "Bottom Up", and "Top Down" views.

 

Option2: Use the methods of the "CSHTML5.Profiler" class (recommended)

Note: this feature requires C#/XAML for HTML5 version 1.0 Beta 11 or newer.

You can use the two following C# methods to measure the time spent in specific portions of your code:

• CSHTML5.Profiler.StartMeasuringTime()
  
  You can call this method before the code that you wish to profile in order to start the stopwatch.
  
  This method returns a number that you need to pass to the "StopMeasuringTime()" method.
• CSHTML5.Profiler.StopMeasuringTime(description, resultOfStartMeasureCall)
  
  You can call this method after the code that you wish to profile, in order to stop the stopwatch.
  
  This method takes 2 arguments: the first is an arbitrary text that you can specify to describe the measure, while the second argument is the number returned by the call to the "StopMeasuringTime()" method.

Note: the time measured is "accrued", meaning that it is cumulative if the code is executed multiple times.

Here is an example of use:

// Call the "StartMeasuringTime" method to start the stopwatch:
var t0 = CSHTML5.Profiler.StartMeasuringTime();

// This is the code that we want to profile (ie. measure the time it takes to execute):
List<string> list = new List<string>();
for (int i = 0; i < 10000; i++)
{
    list.Add(i.ToString());
}

// Call the "StopMeasuringTime" method to stop the stopwatch:
CSHTML5.Profiler.StopMeasuringTime("Time it takes to execute a loop with 10000 items", t0);

 

To view the results of the profiling:

1. Open the "Developer Tools" of your browser. For example, to open the Developer Tools of Chrome, press Ctrl+Shift+I
2. Go to the browser "Console" window. For example, with Chrome, you just need to click the "Console" tab inside the Developer Tools.
3. Type the folllwing JavaScript inside the Console window:
   ViewProfilerResults();

The list of all the measurements will appear, together with the total time taken for each of them, the number of calls, and the average time per call.

You will also get a CSV-formatted output that is useful for copy/pasting into a spreadsheet application. This is how it works to copy/paste into a spreadsheet application while preserving the format of the data:

• With Microsoft Excel, you can copy/paste the CSV-formatted output into a new spreadsheet, then go to the Data menu, and click the "Text to Columns" button. A wizard will appear, choose "Delimited", click Next, choose "Comma" for the delimiter, and click Finish.
• With Google Spreadsheets (online), you can copy/paste the CSV-formatted output into a new spreadsheet, then click the small contextual button that appears after pasting, and click "Split text to columns..."

 

See Also

• How to use the native HTML5 canvas for high performance

 

Contact Us

Please click here for contact information.