Jules Boussekeyt

 

Profile your Javascript Application

Fluidity and responsivness are key points for you Javascript application. You may be in trouble to identify bottlenecks and measure performance at specific times, for example when the user click on a button, or send some ajax calls, or doing computational work ..

Profile loading time of an email in Gmail

Let's take for example Gmail, there's a list of emails. When user clicks one of those, it loads the email in the window. This action can be represented by this method:

/**
 * Load according conversation in the window
 */
var loadConversation = function(conversationId) {
  // (the code we want to profile)
  // - send an ajax call to fetch email
  // - render a templates with email's informations
  // - etc ..
}

The loadConversation method is the one we want to profile. Let us profile it the best way possible!

Discover the Web Profiler tool

The best tool to profile a website is the Profile panel in Chrome web toolbar. First thing to know about the Profile panel is it profiles all your javascript code currently running. In our case we just need it to profile the loadConversation method.

javascript profiler

To profile only the loadConversation() method we're going to wrap this method to start the profiler at the beggining and stop it when the method call finishes. We can now create an underscore.js mixin:

_.mixin({
  profile: function(fn) {
    return function(profileId) {
      // start profiler
      console.profile(profileId);

      // call our real function
      fn.apply(this, arguments);

      // stop profiler
      console.profileEnd(profileId);
    }
  }
});

(some other underscore mixins).

We can now use it like this:

var loadConversation = _.profile(function(conversationId) {
  /* .. code profiled .. */
});

Example on how to use the Web Profiler

If we execute following code:

var expensiveFn = _.profile(function(profileId) {
  var i = 0;

  // expensive loop
  while (i < 100) {
    arr = _.range(0, 50 * 1000);
    i++;
  }

  // expensive loop
  while (i < 200) {
    _.uniq(arr, 50 * 1000);
    i++;
  }                
});

expensiveFn('123');

Now we click on the 123 profile on the right sidebar, we now see the following graphic:

javascript performance in percents

First of all Chrome's profiler isn't intuitive. To configure the profiler correctly follow these steps:

  • Click on the Heavy (Bottom up) link and select Tree (Top Down), this will show us a nice arborescence.
  • Be sure the % icon is NOT selected, this will show us numbers in milliseconds:
  • Then click on the Total column to order results, longest calls should be on top.

We have something like:

javascript performance in milliseconds

The previous screenshot show us:

  • _.range() call took 46 ms
  • _.uniq() call took 381ms

See this jsfiddle for the full example. (keep console open).

Your done. The Javascript Profiler is the perfect tool to identify bottlenecks in your Javascript application.