mixin fun

JavaScript performance comparison

Revision 33 of this test case created by Joe Fiorini

Preparation code

<script>
  //1
  var circleFns = {
    area: function() {
      return Math.PI * this.radius * this.radius;
    },
    grow: function() {
      this.radius++;
    },
    shrink: function() {
      this.radius--;
    }
  }

  //2
  var asCircle = function() {
      this.area = function() {
        return Math.PI * this.radius * this.radius;
      };
      this.grow = function() {
        this.radius++;
      };
      this.shrink = function() {
        this.radius--;
      };
      }
     
     
     
      //3
     
  var asCircleCached = (function() {
    var area = function() {
        return Math.PI * this.radius * this.radius;
        };
    var grow = function() {
        this.radius++;
        };
    var shrink = function() {
        this.radius--;
        };
    return function() {
      this.area = area, this.grow = grow, this.shrink = shrink;
    }
  })();

  var asCircleCachedPassedObj = (function() {
    var area = function() {
        return Math.PI * this.radius * this.radius;
        };
    var grow = function() {
        this.radius++;
        };
    var shrink = function() {
        this.radius--;
        };
    return function(obj) {
      var proto = obj.prototype;
      proto.area = area, proto.grow = grow, proto.shrink = shrink;
    }
  })();

  var asCircleCachedPassedProto = (function() {
    var area = function() {
        return Math.PI * this.radius * this.radius;
        };
    var grow = function() {
        this.radius++;
        };
    var shrink = function() {
        this.radius--;
        };
    return function(proto) {
      proto.area = area, proto.grow = grow, proto.shrink = shrink;
    }
  })();

  //4
  Function.prototype.curry = function(arg, context) {
    var f = this;
    return function () {
        var args = [arg];
        for (var i = 0, len = arguments.length; i < len; i += 1) {
            args[i + 1] = arguments[i];
        }
        return f.apply(context || this, args);
    };
  };

  //4
  var asCircleCachedAndCurried = (function() {
    var area = function() {
        return Math.PI * this.radius * this.radius;
        };
    var grow = function(growBy) {
        this.radius += growBy;
        };
    var shrink = function(shrinkBy) {
        this.radius -= shrinkBy;
        };
    return function(options) {
      this.area = area, this.grow = grow.curry(options['growBy']), this.shrink = shrink.curry(options['shrinkBy'])
    }
  })();

  //5
  var asCircleWithOptions = function(options) {
      this.area = function() {
        return Math.PI * this.radius * this.radius;
      };
      this.grow = function() {
        this.radius += options.growBy;
      };
      this.shrink = function() {
        this.radius -= options.shrinkBy;
      };
      }
     
     
     
      //6
     
  var CircleComponent = function(circle, options) {
      circle.area = function() {
        return Math.PI * circle.radius * circle.radius;
      };
      circle.grow = function() {
        circle.radius += options.growBy;
      };
      circle.shrink = function() {
        circle.radius -= options.shrinkBy;
      };
      };

  //set up test constructor
  var CircularObject = function(radius) {
      this.radius = radius
      };
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
old style
for (var k in circleFns) {
  if (circleFns.hasOwnProperty(k)) {
    CircularObject.prototype[k] = circleFns[k]
  };
}
var obj = new CircularObject(4);
obj.shrink();
pending…
new style
asCircle.call(CircularObject.prototype);
var obj = new CircularObject(4);
obj.shrink();
pending…
new style w/ caching
asCircleCached.call(CircularObject.prototype);
var obj = new CircularObject(4);
obj.shrink();
pending…
new style w/caching and options
asCircleCachedAndCurried.call(
CircularObject.prototype, {
  growBy: 2,
  shrinkBy: 2
});
var obj = new CircularObject(4);
obj.shrink();
pending…
new style uncached w/options
asCircleWithOptions.call(
CircularObject.prototype, {
  growBy: 2,
  shrinkBy: 2
});
var obj = new CircularObject(4);
obj.shrink();
pending…
Direct assignment function w/ options
var obj = new CircularObject(4);
CircleComponent(obj, {
  growBy: 2,
  shrinkBy: 2
});
obj.shrink();
pending…
cached passed Object
asCircleCachedPassedObj(CircularObject);
var obj = new CircularObject(4);
obj.shrink();
pending…
cached passed prototype
asCircleCachedPassedProto(CircularObject.prototype);
var obj = new CircularObject(4);
obj.shrink();
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment