Javascript prototype operator performance: saves memory, but is it faster?

by

Edit in 2021:

This question was asked in 2010 when class was not available in JS. Nowadays, class has been so optimized that there is no excuse not to use it. If you need to use new, use class. But back in 2010 you had two options when binding methods to their object constructors — one was to bind functions inside the function constructor using this and the other was to bind them outside the constructor using prototype. @MarcoDemaio’s question has very concise examples. When class was added to JS, early implementations were close in performance, but usually slower. That’s not remotely true anymore. Just use class. I can think of no reason to use prototype today.

It was an interesting question, so I ran some very simple tests (I should have restarted my browsers to clear out the memory, but I didn’t; take this for what it’s worth). It looks like at least on Safari and Firefox, prototype runs significantly faster [edit: not 20x as stated earlier]. I’m sure a real-world test with fully-featured objects would be a better comparison. The code I ran was this (I ran the tests several times, separately):

var X,Y, x,y, i, intNow;

X = function() {};
X.prototype.message = function(s) { var mymessage = s + "";}
X.prototype.addition = function(i,j) { return (i *2 + j * 2) / 2; }

Y = function() {
  this.message = function(s) { var mymessage = s + "";}
  this.addition = function(i,j) { return (i *2 + j * 2) / 2; }
};


intNow = (new Date()).getTime();
for (i = 0; i < 10000000; i++) {
  y = new Y();
  y.message('hi');
  y.addition(i,2)
}
console.log((new Date()).getTime() - intNow); //FF=5206ms; Safari=1554

intNow = (new Date()).getTime();
for (i = 0; i < 10000000; i++) {
  x = new X();
  x.message('hi');
  x.addition(i,2)
}
console.log((new Date()).getTime() - intNow);//FF=3894ms;Safari=606

It’s a real shame, because I really hate using prototype. I like my object code to be self-encapsulated, and not allowed to drift. I guess when speed matters, though, I don’t have a choice. Darn.

[Edit] Many thanks to @Kevin who pointed out my previous code was wrong, giving a huge boost to the reported speed of the prototype method. After fixing, prototype is still around significantly faster, but the difference is not as enormous.

More Related Contents:

  1. Javascript when to use prototypes
  2. Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?
  3. How to efficiently count the number of keys/properties of an object in JavaScript
  4. How do you performance test JavaScript code?
  5. What is the difference between parseInt() and Number()?
  6. What’s the fastest way to loop through an array in JavaScript?
  7. Most efficient way to concatenate strings in JavaScript?
  8. Good ways to improve jQuery selector performance?
  9. Unobtrusive JavaScript: at the top or the bottom of the HTML code?
  10. How to stop intense Javascript loop from freezing the browser
  11. What is the most efficient way to reverse an array in Javascript?
  12. Microsoft CDN for jQuery or Google CDN? [closed]
  13. Performance differences between visibility:hidden and display:none
  14. Prepend text to beginning of string
  15. Firestore slow performance issue on getting data
  16. In Javascript, is it expensive to use try-catch blocks even if an exception is never thrown?
  17. Why is iterating through an array backwards faster than forwards
  18. How to change the playing speed of videos in HTML5?
  19. Is ternary operator, if-else or logical OR faster in javascript?
  20. Javascript Set vs. Array performance
  21. recursive function vs setInterval vs setTimeout javascript
  22. HTML5 Canvas Performance and Optimization Tips, Tricks and Coding Best Practices [closed]
  23. How do I use Browserify with external dependencies?
  24. Why is pop faster than shift?
  25. Sort a table fast by its first column with Javascript or jQuery
  26. draw 10,000 objects on canvas javascript
  27. JavaScript Profiler in IE
  28. Enable smooth scrolling for my website in all browsers
  29. What’s the best way (most efficient) to turn all the keys of an object to lower case?
  30. JavaScript Performance Long Running Tasks

Leave a Comment