For the purposes of this post I’m using a simple application called Water Ripples that simulates water rippling on an HTML5 canvas when the mouse moves over it.
Unfortunately I notice that the ripples animate incredibly slowly, so I’m going to use the profiler to investigate this behavior.
Here are the phases I will walk you through:
- Profile the app
- Use the report to identify the issue and try to fix it.
- After the fix, test the app by re-running it to check if animations are smooth or not. I also look at the Profiling report for the fixed app to show what has changed in the report.
- Additional views which can provide further insights into the performance of the app.
Once I have the ripple solution open in Visual Studio, I use “Debug -> Start Performance Analysis” to launch the app under the Profiler. This will build and deploy my application then launch it with the profiler. If this is the first time I’ve used the profiler since I launched Visual Studio I will need to accept the elevation prompt for the collector.
After the app is launched, I move my mouse over the canvas to create ripples. I notice that the ripple animations are not smooth. I then come back to visual studio and stop the profiling which stops the app also and creates an analysis report. Please note the app will be running slower under profiling since profiling adds extra performance overhead; so you should not test performance while profiling, only use the profiler to investigate problems you have noticed during normal use.
After the report is created, the summary view is displayed. From the summary report, I can see that the createRipple function calls the Math.floor function which is taking a significant amount of the overall application time (~40% of the execution time is spent in Math.floor).
I try to fix this problem by not calling the Math.floor function and calculate the floor value directly. Code of createRipple function highlighted in red is replaced with the code in green.
I profile the app again with the change, and I notice that the ripples are now smoother. When I look at the report, I notice that the Hot Path shows the createRipple function only. The “Functions With Most Individual Work” table shows me the functions the most exclusive time is spent in.
From the summary page, I click on createRipple to get more details on this function. Function code view shows me the code for the function. I notice that 91% of the time is being spent within the function body in creating ripples. At this point, I don’t see any scope to improve this function further.
Just to make sure, the summary page didn’t miss any other important function, I select Call Tree view. This view gives comprehensive information about all of my code. When I compare the Average Elapsed Exclusive Time for before and after the changes, I notice an improvement of ~400% from 165.67ms to 43.38ms for the createRipple function.
At this point, I am happy with the performance and do not see any other obvious improvements to make. So I am done for now.
If you have any comments/questions I’d love to hear them in the comments below or in our MSDN forum.