Object Creation Pattern Performance

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