Measuring code execution time in browsers
While experimenting with different data structures and/or algorithms, we may want to measure the execution time of a code block.
For this, we can use
-
Console API’s time() , timeEnd() and timeLog() methods, or
-
Performance API’s methods.
Using Console API’s time methods
Console API provides the following methods for timers
-
console.time() : Starts a new timer.
-
console.timeEnd() : Stops the timer and print the elapsed time to the console.
-
console.timeLog() : Logs the current value of a timer previously started.
Let’s examine these with some examples.
Single Timer
By default, a single timer starts when we call time() and it ends when we call timeEnd()
Example 1:
// Find the sum of first "n" integers
console.time();
var n = 10000;
var sum = 0;
for (var i = 0; i < n; i++) {
sum += i;
}
console.timeEnd();
Above example will output like this (you may see a different value)
default: 0.760009765625ms
Multiple Timers
We can also start multiple timers and can also add labels for each timer.
Example 2:
// Find the sum of first "n" integers
// Using Loops, which is O(n)
console.time('using-loop');
var n = 10000;
var sum = 0;
for (var i = 0; i < n; i++) {
sum += i;
}
console.timeEnd('using-loop');
// Using Mathematical Equation, which is O(1)
console.time('using-math-equation');
var n = 10000;
var sum = n * (n + 1) / 2;
console.timeEnd('using-math-equation');
Above example will output something like this
using-loop: 0.73193359375ms
using-math-equation: 0.0068359375ms
Intermediate Time Values
We also have another method, console.timeLog() which can be used to log the current value of a timer that was previously started. We may not use this that frequently.
Example 3:
// Find the sum of first "n" integers
console.time();
var n = 10000;
var sum = 0;
for (var i = 0; i < n; i++) {
sum += i;
if (i % 1000 === 0) {
console.timeLog()
}
}
console.timeEnd();
Above example will output something like this
default: 0.009033203125ms
default: 0.30712890625ms
default: 0.504150390625ms
default: 0.693115234375ms
default: 0.87109375ms
default: 1.0458984375ms
default: 1.309326171875ms
default: 1.55419921875ms
default: 1.7509765625ms
default: 1.937255859375ms
default: 2.14599609375ms
Remember, adding intermediate time log statements may delay the code execution and it adds up to the overall execution time of the block.
Using Performance API methods
Performance API provides many methods to calculate different metrics in the browser. In this post, we use one simple method which can be used somewhat similar to above-mentioned Console API’s time methods.
Example 4:
// Find the sum of first "n" integers
var t1 = performance.now();
var n = 10000;
var sum = 0;
for (var i = 0; i < n; i++) {
sum += i;
}
var t2 = performance.now();
console.log(t2 - t1);
Above example will output something like this
0.7000000041443855
While using Performance API’s now() method, we need to do the required calculations from our side.
Even though Console API’s time methods looks simpler, Performance APIs provide more advanced measurement metrics using High Resolution Time.
Reference
There are many other interesting methods available in both Console API and Performance API, which can be used in our everyday debugging. More information about these methods can be found at