Object Creation Pattern Performance

Object Creation Pattern Performance

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

19c25948caa92e9d1c629896734cf0d9?s=128

Andy Appleton

July 16, 2012
Tweet

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