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:

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: 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: 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: 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!

Frequently Asked Questions (FAQs) about JavaScript Performance and Developer Console