Object Creation Pattern Performance

A talk at July's London JS meetup about the performance of two JavaScript object creation patterns.

Transcript

1. Object Creation Pattern Performance Andy Appleton @appltn http://appleton.me
2. Two popular patterns for making objects
3. Module Pattern var Module = function(arg){ var self = { getArg: function(){ return arg1; } }; return self; };
4. Constructor Functions var Constructor = function(arg){ this.arg = arg; }; Constructor.prototype.getArg = function(){ return this.arg; };
5. Smackdown vs
6. jsperf.com
7. Test 1: Object Instantiation var doug = new Module('arg'); var bono = new Constructor('arg');
8. Test 1: Object Instantiation Chrome 20 Firefox 13 IE 9 Safari 5.1 Module Constructor +30% (operations/sec)
9. 0 - 1
10. Test 2: Method Calls doug.getArg(); bono.getArg();
11. Test 2: Method Calls Chrome 20 Firefox 13 IE 9 Safari 5.1 Module Constructor +57% (operations/sec)
12. 1 - 1
13. Test 2.5: Instantiation & Method Calls var doug = new Module('arg'); doug.getArg(); var bono = new Constructor('arg'); bono.getArg();
14. Chrome 20 Firefox 13 IE 9 Safari 5.1 Test 2.5: Instantiation & Method Calls Module Constructor +61% (operations/sec)
15. 1 - 2
16. Test 3: Instantiation with inheritance var Module = function(arg1){ // Set up and return self object }; var ModuleChild = function(arg1, arg2){ var self = new Module(arg1); self.method = function(){}; return self; };
17. Test 3: Instantiation with inheritance var Constructor = function(arg1){}; // Add methods to Constructor.prototype var Child = function(arg1, arg2){ // Add instance variables to `this` }; Child.prototype = new Constructor(this.arg1); Child.prototype.method = function(){};
18. Test 3: Instantiation with inheritance var doug = new ModuleChild('arg', 'arg'); var bono = new ConstructorChild('arg', 'arg');
19. Chrome 20 Firefox 13 IE 9 Safari 5.1 Test 3: Instantiation with inheritance Module Constructor +93% (operations/sec)
20. 1 - 3
21. Test 4: Method calls with inheritance doug.getArg1(); doug.getArg2(); bono.getArg1(); bono.getArg2();
22. Chrome 20 Firefox 13 IE 9 Safari 5.1 child method parent method child method parent method Test 4: Method calls with inheritance Module Constructor +56% +53% (operations/sec)
23. 2 - 3
24. Test 4.5: Instantiation & Method calls with inheritance var doug1 = new ModuleChild('arg', 'arg'); doug1.getArg1(); var doug2 = new ModuleChild('arg', 'arg'); doug2.getArg2(); var bono1 = new ConstructorChild('arg', 'arg'); bono1.getArg1(); var bono2 = new ConstructorChild('arg', 'arg'); bono2.getArg2();
25. Chrome 20 Firefox 13 IE 9 Safari 5.1 child method parent method child method parent method Test 4.5: Instantiation & Method calls with inheritance Module Constructor +92% +91% (operations/sec)
26. 2 - 4
27. Constructor functions are faster to instantiate Use constructors if you’re going to have a lot of objects
28. Modules are quicker to call methods on Use modules if you’re going to be calling a lot of methods
29. Other factors...
30. Bono > Crockford and apparently...
31. 1. Object instantiation http://jsperf.com/object-instantiation-test 2. Method calls on instantiated object http://jsperf.com/method-calling-test 2.5. Object instantiation and method calls http://jsperf.com/intantiation-and-method-call-test 3. Object instantiation with inheritance http://jsperf.com/instantiation-with-inheritance-test 4. Method calls on instantiated objects with inheritance http://jsperf.com/method-calling-with-inheritance-test 4.5. Object instantiation and method calls with inheritance http://jsperf.com/instantiation-and-method-call-test-with-inheritance