How to evaluate the performance of two different implementations in TypeScript?
The solution will be built on top of StackBlitz and by making use of Decorator Factory
I always wanted to have a utility that lets you quickly evaluate performance difference between two different approaches.
Goals
When I started thinking about building a utility for this purpose, I had below goals in mind.
- My code may use a 3rd party library for solving a part of the problem. So wanted to add / resolve dependencies in a browser environment.
- Should be developer friendly. Wanted to have a good developer experience and control.
Trying to understand how to resolve the client side dependency at run time in a browser, I landed on Turbo, which is a blazing fast NPM client originally built for StackBlitz.
Reading about Turbo, it very well suited to solve my problem of adding/ resolving dependencies at run time in a browser environment. Considering the popularity and developer friendliness of StackBlitz, It also made me think to build a utility around it instead of rebuilding something from scratch.
Hence created a typescript decorator which makes use of decorator factory, in a stackblitz to evaluate performance of a method by running the method multiple times and averaging out the result.
This decorator has below features:
- It will evaluate the performance and prints the result in a console.
- It lets you control the number of executions (The final result will be the mean value of these executions)
- You can see the result in milliseconds / seconds. By default, the result will be in milliseconds
- Developers can view internal trace by setting enableTrace flag
Demo & Reference
You can find this utility here.
In the provided StackBlitz, you can see how we compare two methods, which does the same thing in different ways.
- groupWithPlainJavaScript — Does not use a 3rd party library
- groupWithUnderscore — Makes use of a 3rd party library. And we can use stackblitz to add the dependency.
You will be able to see the results by opening the integrated StackBlitz console
As you can already see, you can tweak your code in the editor and execute this as many times you want to get a rough idea on performance benchmarks. It just uses your browser environment without any overheads.
Feel free to tweak this and explore the possibilities! Happy Coding :-)
