How to Trace JavaScript Performance Using Your Developer Console

There is one universal rule which applies to all websites and applications: they must be fast. (A few years ago I would have stated sites should be responsive, although that word now has RWD connotations).

Unfortunately, it’s evident that some developers are not concerned with site speed. If they did, multi-megabyte monstrosities would be rare and average page weights would never have exceeded 1Mb. It (almost) makes me long for the dial-up days when a 100Kb home page was considered excessive!

A lightweight and fast user experience has never been more important. Mobile and web use in developing countries is increasing exponentially and fast broadband has never been plentiful or inexpensive. Trimming page fat is vital and so is optimizing your JavaScript performance. Fortunately, there are a number of easy ways to determine whether your scripts are causing significant delays.

Console Timing

Firebug, the Webkit Inspector, Opera Dragonfly and IE11 all support the console.time() and console.timeEnd() methods, e.g.

// start timer
console.time("DOM update");

// update
var p = document.getElementById("result");
for (var i = 0; i < 3000; i++) {
	p.textContent += i + " ";
}

// end timer
console.timeEnd("DOM update");

A timer name is passed to console.time() and console.timeEnd(). You can have any number of timers running:

// start "DOM update" timer
console.time("DOM update");

// update
var p = document.getElementById("result");

// start "loop" timer
console.time("loop");
for (var i = 0; i < 3000; i++) {
	p.textContent += i + " ";
}
// end "loop" timer
console.timeEnd("loop");

// end "DOM update" timer
console.timeEnd("DOM update");

The results are shown in the developer console:

Firebug performance timing

Profiling Timestamps

Another option is time-stamping. This is only available in Firebug and the Webkit Inspector — it records a point during execution, e.g.

// record timestamp
console.timeStamp("DOM update started");

// update
var p = document.getElementById("result");
for (var i = 0; i < 3000; i++) {
	p.textContent += i + " ";
}

// record timestamp
console.timeStamp("DOM update ended");

Firebug displays when a time-stamp was encountered:

Firebug timestamps

That may help a little, but the Webkit Inspector has a few more tricks. Click the Timeline tab followed by the Record icon in the lower-left of the window:

Webkit Inspector timeline recording

Refresh your page then hit the Record icon again to stop recording. The time-line shows a visual representation of all events with your timeStamps marked in yellow in the timer bar:

Webkit Inspector timeline

Very useful.

Removing Your Timers

Ideally, you should never leave console logging in production code. If you do, you’ll need to test whether the methods are available since they can cause errors in browsers where they’re not supported, e.g.

if (console && console.timeStamp) console.timeStamp("My timestamp");

Personally, I recommend removing all console commands. Some build processes will do this for you, or you could use the following regular expression in your editor to target and remove all timer-related logging:

console.time[^(]*("[^"]+");

Open your console and start optimizing those scripts!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Sean Roberts

    I feel like this article is very half baked for such an important topic in which it is addressing. There were only two small tips that will leave a novice developer thinking that is all there is too it. But how you can drill down into these timelines for more helpful information, looking into memory utilization for finding potential memory leaks, and using audits are just a few more tips that are very important to know. That being said, I know that is a lot for a single article and may be out of scope for this particular article -but there is no reference on where you can go to find out more information if the person is interested in doing some serious performance measuring with the console. Can you throw on some reference links to the dev tools, other metric tools, or even to performance evangelists like Steve Souders from Google? Thanks

    • Jeroen

      Sean,

      Don’t forget the laziness of the writer. He didn’t even check the firefox developers tools.
      The article on the profiler tool: “This is only available in Firebug and the Webkit Inspector”. Everyone with ff 22 has profiler tab in the webdeveloper tools.

      • http://www.optimalworks.net/ Craig Buckler

        Jeroen – Firefox’s console/profiler does not support console.timeStamp. It seems you were too lazy to read the article properly!

      • Jeroen

        What do you need consle.timeStamp for?

        You simply shouldnt use console.timeStamp if you are serious about speedtesting. You should run proper test. Like you can on jsperf, not polute your code with console.timeStamp and console.log garbage.

        There are a lot of really strong testing frameworks out there, and it is really easy to ad some performance tests to it: http://stackoverflow.com/a/680713/2496717 And then the firefox profiler is more then strong enough.

      • http://www.optimalworks.net/ Craig Buckler

        This article is specifically about using console.timeStamp to time a specific routine. Of course there are plenty of other options, methods, frameworks and libraries — but this article isn’t about them (you could fill a book with all the possibilities).

        Question the usefulness of console.timeStamp by all means, but your original comment was factually incorrect and could have led to confusion.

  • Sean Roberts

    Well it seems that your post has already been the cause of confusion to us. If your post is truly “…specifically about using console.timeStamp to time a specific routine”, then you should probably rename the article to something more semantic or indicative of the scope of the article. I don’t think the article is the production of a lazy writer, that is a little harsh, but instead a victim of confusion lead by improper naming.

    • http://www.optimalworks.net/ Craig Buckler

      Ahh, but then you wouldn’t have read it! ;^)