Vanilla JavaScript Timing Functions

— 4 minute read

Web performance is such an important part of our jobs as developers; we are responsible for making the web fast again.

The web got bloated and filled with rubbish, trust me. I've used bootstrap and jQuery, but think about it your including whole libraries and only using what, 10% of it?

So let's talk about performance today, especially JavaScript performance.

We are going to look into timing your functions, so we can see how fast they are.

There are two official ways of doing so

Using performance.now()

The one way we can use is performance.now() it returns something called a DOMHighResTimeStamp in milliseconds.

To use this we have to create a variable at the beginning of our function, and a variable at the end than we log the difference.

This looks like this:

myFunction = () => {
  for (i = 0; i < 10; i++) {}
};
const start = performance.now();
myFunction();
const end = performance.now();
console.log(`The function took ${end - start} milliseconds.`);
// The function took 0.2699999968172051 milliseconds.

So very basic we have a function which loops ten times, then we start a performance.now() call the function and then define our end time. Last we log the time between (end - start)

Feel free to fork my code and adjust the counter (10) and see the time increase!

See the Pen Vanilla JavaScript Timing Functions | performance by Chris Bongers (@rebelchris) on CodePen.

Using console.time()

Another way is by using the console.time() function. It has one property, and it accepts a label that we can define. Then we use console.timeEnd() to stop counting; this will automatically log the result in our console. So the cool thing about this function is that we can use multiple timers at the same time, and they are easier to use.

myFunction = () => {
  for (i = 0; i < 10; i++) {}
};
console.time('myFunction');
myFunction();
console.timeEnd('myFunction');
// myFunction: 0.242919921875ms

You can also try and play with this on this Codepen, try and increase the counter (10)

See the Pen Vanilla JavaScript Timing Functions | time by Chris Bongers (@rebelchris) on CodePen.

Which one to use?

There is not a good or wrong here; both do what they promise. From my perspective though the console.time is way easier to use, you don't have to manually log anything extra, and it's easier to keep track off within the code.

I would suggest just picking one and make the web faster, try different approaches to your code and see how much of a difference it makes. Remember JavaScript can be weird, something that you think is slow may be faster, but you will only know with logging this.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter