Vanilla JavaScript Timing Functions

Web performance is integral to 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 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() permalink

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

We must create a variable at the beginning of our function and a variable at the end. Then 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, 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() permalink

Another way is using the console.time() function. It has one property and accepts a label 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 simultaneously, 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? permalink

It is no good or wrong here; both do what they promise. From my perspective, the console.time is way easier to use, you don’t have to log anything extra manually, and it’s easier to keep track of within the code.

I would suggest just picking one and making the web faster, trying different approaches to your code, and seeing 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 by logging this.

Thank you for reading, and let’s connect! permalink

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