The Windward Studio

Windward Blog Home

High Performance Javascript: Should You Assign Prototypes?

by
Posted on 07/18/2014

Please Share This

 

Interested in using the new ECMAScript 5 feature allowing assignment of new prototypes to instantiated objects? Read on to see how it performs!

ECMAScript 5  has many new, exciting features, no doubt, but when using them, always make sure to consider potential compatibility issues and be wary of potential shortcuts.

In one project we are currently working on, web workers are extremely helpful, allowing us to utilize background threads while leaving GUI handling or other foreground tests to continue unimpeded.

Web workers communicate through messages that are posted to them by the main thread, but they have their prototype stripped off and are copied to a new instance. I think about it as if I had just received a freshly parsed JSON object (e.g. JSON.parse(JSON.stringify(object))). Before you can treat the object as its desired types, you need to follow one of two paths:

  1. Either copy the passed object into a new instance of the original object (by using the constructors of your desired type), or
  2. Have a prototype assigned directly to it, which is simple and at first glance seems like it might be faster.

To test which method is faster, I made a small program. This program made a list of 75 zoos, each with a variable number of animals and added functions, with each animal containing a type and distinct prototype.

 

I then created a web worker and posted a message containing the zoolist to it. This new web worker would time the construction of the object: once initializing all of the zoos and animals to new instances, once setting the prototype of the old object. The web worker would then pass the results of this performance timing back to the main method.

I ran this test three times, each with different numbers of animals per zoo. In order to have multiple points of data — and therefore increase the accuracy of our test — I tested the speed of the construction multiple times. Additionally, I prevented multiple web workers from being created simultaneously and decreasing the reliability of our test.

Here is worker.js and main.js: Worker.js: (note, arrays are passed back as originally the test ran multiple times within the web worker)

 

I ran this test 50 times on each browser (Opera, Chrome, IE, and Firefox), each time with three different numbers of animals per zoo. The means of those runs are:

Assign Prototypes Chart

These results hardly need analysis! Clearly, it is much faster to use the new instantiation method than it is to assign prototypes.

The lesson: don’t try to get creative using prototype assignment. Many of the browsers completely turn off optimization for them, and using them is extraordinarily slow.

It is interesting, however, how widely the results of this testing varies from one browser to another. Most notably, consider the difference between the slowest (Internet Explore) and the fastest (Chrome and Opera).

Have you run similar tests? Share your results in the comments section below.

Please Share This



Author: Nathan Bellowe

Nathan is a Development Intern at Windward. He spends most of his time working in C#, Java, and lately Javascript. He studies computer science but continues his work at Windward while in school. He plans to continue working on Windward, and aims to be the chief Robot Engineer, when the company follows the inevitable path from reporting software to robots, unless he breaks his hands (like he’s done with both feet this summer), and then he won’t be able to code.

Other posts by