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
   

   View Slide

2. Two popular patterns for
   making objects
   

   View Slide

3. Module Pattern
   var Module = function(arg){
   var self = {
   getArg: function(){
   return arg1;
   }
   };
   return self;
   };
   

   View Slide

4. Constructor Functions
   var Constructor = function(arg){
   this.arg = arg;
   };
   Constructor.prototype.getArg = function(){
   return this.arg;
   };
   

   View Slide

5. Smackdown
   vs
   

   View Slide

6. jsperf.com
   

   View Slide

7. Test 1: Object Instantiation
   var doug = new Module('arg');
   var bono = new Constructor('arg');
   

   View Slide

8. Test 1: Object Instantiation
   Chrome 20 Firefox 13
   IE 9 Safari 5.1
   Module
   Constructor +30%
   (operations/sec)
   

   View Slide

9. 0 - 1
   

   View Slide

10. Test 2: Method Calls
    doug.getArg();
    bono.getArg();
    

    View Slide

11. Test 2: Method Calls
    Chrome 20 Firefox 13
    IE 9 Safari 5.1
    Module
    Constructor
    +57%
    (operations/sec)
    

    View Slide

12. 1 - 1
    

    View Slide

13. Test 2.5: Instantiation &
    Method Calls
    var doug = new Module('arg');
    doug.getArg();
    var bono = new Constructor('arg');
    bono.getArg();
    

    View Slide

14. Chrome 20 Firefox 13
    IE 9 Safari 5.1
    Test 2.5: Instantiation &
    Method Calls
    Module
    Constructor +61%
    (operations/sec)
    

    View Slide

15. 1 - 2
    

    View Slide

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;
    };
    

    View Slide

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(){};
    

    View Slide

18. Test 3: Instantiation with
    inheritance
    var doug = new ModuleChild('arg', 'arg');
    var bono = new ConstructorChild('arg', 'arg');
    

    View Slide

19. Chrome 20 Firefox 13
    IE 9 Safari 5.1
    Test 3: Instantiation with
    inheritance
    Module
    Constructor +93%
    (operations/sec)
    

    View Slide

20. 1 - 3
    

    View Slide

21. Test 4: Method calls with
    inheritance
    doug.getArg1();
    doug.getArg2();
    bono.getArg1();
    bono.getArg2();
    

    View Slide

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)
    

    View Slide

23. 2 - 3
    

    View Slide

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();
    

    View Slide

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)
    

    View Slide

26. 2 - 4
    

    View Slide

27. Constructor functions are faster to instantiate
    Use constructors if you’re going
    to have a lot of objects
    

    View Slide

28. Modules are quicker to call methods on
    Use modules if you’re going to
    be calling a lot of methods
    

    View Slide

29. Other factors...
    

    View Slide

30. Bono > Crockford
    and apparently...
    

    View Slide

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
    

    View Slide