Benchmarking your JavaScript Code

adityatyagi

Aditya Tyagi

Posted on April 22, 2020

Benchmarking your JavaScript Code

There is always a better way to implement that function

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.

Comparing functions

As you can see, I went with a function which is nearly 5% faster than the others and the slowest of the lot is 26% slower than the fastest function. 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 or the adversity that 26% slower code will have on your product.

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!

Originally published at adityatyagi.com

💖 💪 🙅 🚩
adityatyagi
Aditya Tyagi

Posted on April 22, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Benchmarking your JavaScript Code
javascript Benchmarking your JavaScript Code

April 22, 2020

Javascript and Classical Inheritance
javascript Javascript and Classical Inheritance

October 28, 2019

Dev.To is great place...
javascript Dev.To is great place...

October 23, 2019