Calculate the time of a Javascript code block

Putting in some dirty slow script is worst than coding nothing. My recent projects for Themelet made me understand that why we should keep Javascript in control, however I have no other choice than that of using Javascript in Blogger themes. However, in a personal project I did some quick code block speed test to determine the best option.

From beginning...

In my physics practicals, to determine the time of Simple Harmonic Motion we use to note down the initial time and then after some oscillation we had our final time, we deduce initial from final we get change in time. Same goes with time calculation in Javascript. We calculate the initial time and final time and subtract that. 

var initial = (new Date).getTime();
for (var i = 0; i < 10; i++) {
  console.log(i);
}
var final=(new Date).getTime();
console.log('time: '+(final-initial)+'ms');

The time in console was 6 ms. A simple loop block wouldn't make much sense while we test time. In this case the time returned was correct and nothing wrong with it as soon as the code get longer. John Resig gave the correct reason to not to use this in testing. Other than accuracy, the result was of lower resolution. Means we need to move to some native API to get the time.

Native Solution

Browsers, however now have DOMHighResTimeStamp which stores time values and we can access them using Performance.now() which does the same function as above code but it is high resolution time API which is accurate to 1 of 1000th millisecond. I guess this is what we really wanted.

IE 10	Chrome 20	Firefox 15	-	Opera 15

I tested the same code again and I was totally astound to see a much more accurate time. The code requires prefixes like webkit to support it in basic browser support. Basically the code looks like:

var initial = performance.now();
for (var i = 0; i < 10; i++) {
  console.log(i);
}
var final=performance.now();
console.log('time: '+(final-initial)+'ms');

However to make it browser friendly, I use this script which I found on Johnson's blog.

var now = (function() {
    var performance = window.performance || {};
    performance.now = (function() {
        return performance.now    ||
        performance.webkitNow     ||
        performance.msNow         ||
        performance.oNow          ||
        performance.mozNow        ||
        function() { return new Date().getTime(); };
    })();
    return performance.now();

A little unstable API

This one is also a native API but it is unstable and should be avoided in production. console.time can calculate time effectively and consoles out the time in milliseconds. What makes it so special is the execution way of this API. Lets have a look at a bit of code:

console.time('loop');
for (var i = 0; i < 10; i++) {
  console.log(i);
}
console.timeEnd('loop');

It gives the time in millisecond. We just put identifier in console.time and while processing we can have 10,000 calculations of time with different identifiers. Isn't that handy?

But well, I need to put a point here that, calculation of time can have different methods and they may have a few milliseconds of difference; not just because of API but due to the device handling them. Testing them in different devices will give you times of too much variation because in the end it all comes to device performance.

By considering it, we should keep our codes simple to execute so that every device could load them seamlessly.

Got something in mind??? Throw a comment.