MeasureThat.net

Run results for: Compare Performance of some JS Design patterns

Compare performance as well as memory consumed of 3 JS Design Patterns: Factory, Constructor and Prototype

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36
Chrome 67
Mac OS X 10.13.1
Desktop
6 years ago
Test name Executions per second
Using this 153896.1 Ops/sec
Using prototype 104534.2 Ops/sec
Using Factory 100497.4 Ops/sec
Script Preparation code:
​x
 
function T(i) {
  this.counter = i;
}
  
T.prototype.myMethod = function() {
  if (this.counter == 20000) {
    console.log('Hey T!');
  }
};
  
function Tt(i) {
  this.counter = i;
  this.myMethod = function() {
    if (this.counter == 20000) {
      console.log('Hey Tt!');
    }
  };
}
​
function factoryPattern(i){
  var counter = i;
  function myMethod() {
    if (counter == 20000) {
      console.log('Hey Factory!');
    }
  }
  return {
    myMethod: myMethod
  }
}
​
Tests:

  • Using this

     
    for (var i = 1; i <= 100; i++) {
      var x = new T(i);
      x.myMethod();
    }

  • Using prototype

     
    for (var i = 1; i <= 100; i++) {
      var x = new Tt(i);
      x.myMethod();
    }

  • Using Factory

     
    for (var i = 1; i <= 100; i++) {
      var x = factoryPattern(i);
      x.myMethod();
    }