Step 1: Create a simple MVC Project in Visual Studio and build the project without doing any changes.
Step 2: Change the Configuration Mode from Debug to Release
To report changes to Angular, the change detectors maintain track of the component's historical and current states as well as its structure.
When Angular receives a change detector report, it instructs the appropriate component to re-render and update the document object model (DOM).
Step 3: Go to Menu Analyze -> Performance Profiler
After selecting the menu, you will see the tools available for Analysing, select the Startup Project, check the Performance Wizard tool and finally click on Start button
Step 4: A Performance Wizard window will appear as below, In this steps, there are 4 different ways for profiling and each one has different purpose, for now, remained selected CPU Sampling and click on Next > button
In the next window, you will see all the available Projects we have present in the solution, in our case it will be SampleMVCWebsite, the other option are An executable (.EXE file) and An ASP.NET application, as we want to profile for the complete project we keep our project selected and click on Next >
In next step, the Wizard will tell you that the performance session and profile will be shown either in IIS or development server, it is just an info window and we click on Next >
You have arrived to the final step of wizard, it is mentioned here that you have completed all the settings and that’s all, we finish the wizard by click on Finish button.
Step 5: At this point the profiling has already begun, you can notice that the development server has already initialized, your browser has already loaded the website and profiling is on. You would notice below image in visual studio with an output window providing each step of the profiling. You can pause or stop the profiling during any time of the process.
Step 6: Go to browser where the website is loaded and browse /Account/Register of your website by clicking on register link on the top. Fill the form and complete all the validation necessary for the password strength and click on Register button.
Now, go to your profile in the website and you will see the following details on the screen, you can change your password here and Manage external logins.
Try changing password, after password is successfully changed, log off and close the browser window.
Step 7: Go back to the Visual studio as soon as you close your browser. You notice that the report is starting to generate as image below. You can see the steps in the output window as it is collecting all the data required for generating report file (.vspx). It takes a few seconds to process all the records and display all the result in a window.
Step 8: This is the step where you see the result of the process you have done in the browser, that is, Register, password change and log off. There is a graph which shows the CPU usage in Y axis and time taken for execution (in seconds) in X axis. During the whole process, you can analyse which part of the code is consuming how much CPU usage.
You can see the CPU usage in depth, like the process where we have registered in the website, to do so you have to select the area in the graph and click on the “Filter by selection” link, just right side of the graph.
After filter selection, you can see the details of the area where we have clicked on the register process as below. The time between 23 seconds and 30 seconds is the time where the registration process is completed. We can analyse that the whole registration process took roughly about 4 seconds. You can see also the methods calls during this process below the graph and there Sample usage percentage during the registration and below that you can see the Individual functions performance
For Individual function performance, you can click on the selected “MoveNext” as below,
You have now reached the Function Details windows as below, here you can see the “Calling functions” à “Current Functions” à “Called functions” and below that the code which has executed during this process.
Calling function refers to the method from where the Registration part is started.
Current function refers to method body where all the registration process is happening.
Called functions refers to all other method which are going to be called in the Current function.
Called functions refers to all other method which are going to be called in the Current function.
You can click on the each method in the Called functions to see the details of that function and checkout the processes within that functions and so on until you reach end of the stack. Move forward or backward during whole process and their implementation and sampling all are reported within that section. You can even see the code section which is consuming all the CPU processes.
There are other windows available to see more in depth which you can see in the top dropdown box along with other options like filtering saving the report and export the report for future use.
And finally save the report to be used in next step. Reports are saved in Reports folder or you can view it in Performance Explorer.
Step 9: All the Sampling data helps us determine the total performance of an application. After collecting data, you can easily optimize your code and re run all the steps necessary for profiling, review it, generate the report and save it in the same folder “Reports” where you have saved the previous sampling report. Select both old and new sample report and right click the selection and then Compare Performance Reports. After that, the comparison window shows the differences, performance regressions, and improvements that occurred from previous profiling to the new.
