Fast websites, an universal demand, but not always achieved. If you are a web developer, is desired that you expend a couple of your time to care about this point.

Firebug, the Webkit Inspector, Opera Dragonfly and IE11 all support the console.time( ) and console.timeStamp( ), very powerful methods that, used correctly, can help you to trace JavaScript performance very well.

Console.time( )

Creates a new timer under the given name. Call console.timeEnd(name) with the same name to stop the timer and print the time elapsed..

Example:

   console.time("fromHtmlTable");
   jQuery(this.data.source).children('tbody').children('tr').each(function() {
     // more code here...
   });
   console.timeEnd("fromHtmlTable");

And in the Firebug console you should get something similar to the next image:

And, the other output?, I’m using console.timeStamp( ) too!

console.timeStamp( )

Creates a time stamp, which can be used together with HTTP traffic timing to measure when a certain piece of code was executed.

Example:

   console.timeStamp("START: function fromHtmlTable");
   console.time("fromHtmlTable");
   jQuery(this.data.source).children('tbody').children('tr').each(function() {
     // more code here...
   });
   console.timeEnd("fromHtmlTable");
   console.timeStamp("END: function fromHtmlTable");

With these two functions I can track the time elapsed of my functions and also track when they where executed, and now is more easy for me identify if my JavaScript code needs to be optimized.

But wait a minute, numbers doesn’t match at all!! right??, of course, I expected that, but they are very close to the reality, so, be careful how to use these info, but you can trust in the output if you have added correctly the functions in your code.

Note: don’t forget to clean all console calls in your production code!!

I really hope you find this information useful.