It is hard to find someone who is into frontend-development but hasn’t heard about ES6 classes. While a lot of people proclaim them as a feature that makes javascript better, opposition headed by Douglas Crockford consider classes as “bad part of javascript”.
Well, I really do not want to argue here about all pros and cons of ES6 classes (which I believe rather subjective than objective). I decided to consider only one but very important aspect of any feature. I’m talking about performance.
Newly presented classes in javascript usually positioned as syntactic sugar above the functions and prototypes. It is easy to consider them as less performant entities than “native” prototypes — just because classes in javascript build above prototypes and there should be additional overhead. It sounds so obvious so I didn’t even pay attention to that for a very long time.
Until I saw one of the answers on Quora pointing that ES6 classes are actually faster than prototypes in large amounts of instances (~100k). I was really surprised and decided to test this idea.
How I measured
It is a simple process. I literally create a huge amount of objects via classes or via prototypes and measure results using performance.now() function.
Cases
I considered three cases:
Creating new object as instance of an empty class vs creating new object as instance of an empty function
Creating new object as instance of empty class that inherits another empty class vs creating new object as instance of empty function that inherits another empty function
Creating new object as instance of empty class that inherits build-in class vs creating new object as instance of empty function that inherits build-in function
Attempts
I tried different amount of instances, different attempts, different browsers and platforms (browser and nodejs), even different machines. Numbers, of course, were different, but the trend was the same.
Environment
To simplify, further on this article I will talk about measurements of 1000 attempts and 100k instances made on MacBook Pro 15-inch, Mid 2010, 2.4 GHz Intel Core i5, 4 GB 1067 MHz DDR3, MacOS Sierra 10.12.2 in Google Chrome Version 57.0.2987.133 (64-bit) and NodeJS v6.9.1.
Calculations
I captured all attempts and calculated 4 summaries: min, max, median and average (mean).
Results
So, finally results.
NodeJS shows almost the same results for classes and prototypes in most simple case — empty class/empty function. Probably the only deviation is a bigger amount of max for classes (compare 11 against 5 ms):
In both cases process of creating prototypes took a bit more time in average but I believe we can consider this as a statistical error.
Another case is more intriguing. In this case, I compared instances of the class that inherits another empty class against the function that prototyping another function:
Implementation of classes in Chrome looks like to be far slower than in NodeJS. But even though prototypes are faster at least 2 times.
And finally the most complex case. Here I compared the creation of new instances of the class that inherits build-in Date class against the creation of new instances of function that prototype inherits build-in Date constructor. Results are devastating:
All together:
Looks like ES6 classes can be even 20 times slower than prototypes.
Epilogue
Well, what kind of conclusion we can make? Are classes worse than prototypes? I wouldn’t make such a rude decision. They seem to be less performant that’s true, but don’t forget that you hardly will be creating 100K objects instantly. Particle systems in games probably the only real case I can imagine.
On the other hand, I believe you should know how both these technologies perform. It helps to make a right decision when you’re about to choose one of them for your task. Hope this post will be helpful to make a right decision.
And of course, if you would like to double-check all the tests — you are more than welcome. All tests could be found on GitHub
