Profiling JavaScript performance using the WebInspector.

When you have a specific feature in your web application that is starting to feel slow, it can be hard to find out exactly what’s going on in a complex event driven application. The profiler in the WebInspector in Google Chrome is an excellent tool for helping you out with this.

This is our experience after refactoring the “concurrent editing” feature in our product DrFront, that enables multiple people to work on the same frontpage simultaneously. This feature was reported by our users to be very slow when the frontpage included many articles. So here’s our approach to find out what to fix to improve performance.

1. Programmatically start the profiler

This way you only record function calls for the relevant “feature” instead of having to start and stop the profiler manually. So find the function in your application that you want to profile and enter the following:

mergeAndUpdatePositions: function () {

2. Navigate the chart from the top to find the most expensive function calls

Using the “chart” view and hovering over the first line with the mouse in the chart, we see that the function mergeAndUpdatePositions() took a total of 2.65s. This operation freezes the UI while it’s running, so it really needed improving.

Screen Shot 2015-05-22 at 15.44.31

By navigating deeper into the chart (zoom) we can see that it seems to be very expensive to remove and render many Backbone views simultaneously.

Screen Shot 2015-05-22 at 15.52.05

3. Refactor your code

So, after discussing the problem within the team, we decided to refactor the code to not remove and rerender entire views when merging, but rather only update the existing views with the changes.

4. Run the profiler again

After refactoring, we run our application again and can now see that the function mergeAndUpdatePositions() only takes 64.9ms, a 40x improvement!

Screen Shot 2015-05-22 at 16.02.22


We hope you found this helpful. For more info about the profiler, look here.