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 (Windows NT 10.0; Win64; x64; rv:94.0) Gecko/20100101 Firefox/94.0
Firefox 94
Windows
Desktop
3 years ago
Test name Executions per second
Using this 755735.7 Ops/sec
Using prototype 471129.1 Ops/sec
Using Factory 1067671.2 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();
    }