If you are developing a JavaScript Windows Store App, you will want to measure the performance characteristics of your app. The Visual Studio 2012 JavaScript profiler can help you to identify performance issues with your app. This functionality is present in all SKUs of Visual Studio. In this post, I will demonstrate how to diagnose a performance issue in a JavaScript app.
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.
Walkthrough
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.
Before:
After:
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.
In Closing
I hope this simple app helps you to see how you can use JavaScript Profiling to improve the performance of your JavaScript Windows Store apps. If you are curious, you can learn about two additional profiling tools available for JavaScript apps, the JavaScript memory analysis tool, and the JavaScript UI responsiveness tool. You can also learn about Xaml Windows Store App profiling from How to profile a Xaml Windows Store App.
If you have any comments/questions I’d love to hear them in the comments below or in our MSDN forum.