Benchmarking your JavaScript Code

Getting a problem and straightaway writing a function for it is something we all tend to do unless we are industry veterans, because the industry veterans take a lot of factors into account while composing a function. I write “composing” because if you come across code written by people like Kyle Simpson, you’ll be mesmerized by the sheer elegance of their code, and it is nothing short of a well composed song!

Clean Code and the importance of bench-marking

Currently I am reading Clean Code by Robert Cecil Martin and to be honest I am discovering a whole new set of paradigms I wasn’t aware of and thus inculcating clean code habits. One of the habit is bench-marking your piece of code. As a developer, you should always consider that there are multiple ways to achieve the desired results and hence try to figure out the best one.

And if you are developing products which will be/are traffic intensive (say more than 1 Million unique users), then the speed of every little function will play a crucial role in making or breaking the product.

Okay, show me how?

Recently I had to write code for a function to return a string between two curly braces.

For example, if the string is – “{adityatyagi}”, I had to extract the string between “{” and “}”. Thus, the function should return “adityatyagi”.

I did come up with an elementary function but then I decided to benchmark the function with various counter-parts and see which one is the fastest.

Console.time() and Console.timeEnd()

If you wrap your function between console.time() and console.timeEnd(), you can get the time it took the function to execute.

On running this function (say in codepen.io), you’ll get the time it took to execute this function in your developer tools.

For me the result came out to be something like:

default: 0.246826171875ms

The console will print “default” if you don’t give a label to console.time() and console.timeEnd(). If you do want to give a label, then make sure you give the same label to both. For example:

JsPerf – JavaScript performance playground

JsPerf is another way you can compare your functions and benchmark them. It is pretty easy once you get the hold of it. All you have to do is add your different blocks of code and run tests. That’s it.

I compared 4 functions to extract a string between curly-braces using JsPerf. You can see it here.

The results came out to be pretty astonishing, but yes, it did helped to identify the best one of the lot.

jsPerf
Comparing functions

As you can see, I went with a function which is nearly 5% faster than the others. Now this 5% may look like a small difference but when your function is being called a million times within 30 seconds by a million unique visitors, just imagine the difference this 5% will bring.

So do benchmark your functions before you raise that next PR or commit code to production!

If you liked it, do share it with your dev-friends, colleagues and if you have any suggestions for me, let me know in the comments section below!

Leave a Reply

Your email address will not be published. Required fields are marked *

Emails suck, but not mine!

Subscribe if you don't want to do the heavy lifting of searching for articles and blogs around software development, health, books, and self-improvement because I write on these very topics, weekly! Get them straight to your inbox.