ES3 vs ES5 Mixins

JavaScript performance comparison

Revision 3 of this test case created by Pencroff

Info

Test the performance of traditional (ES3-style) mixin functions with mixin functions that handle ES5 properties, as proposed for Object.mixin in ES6.

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    var source = {
      a: 1,
      b: true,
      c: "test"
    };
    for (var k = 0; k < 25; k+=1) {
        source[k] = Math.random().toString(36);
        }
    var target = {};
};
</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
ES3 all properties
for (var prop in source) {
  target[prop] = source[prop];
}
pending…
ES3 own properties
for (var prop in source) {
  if (source.hasOwnProperty(prop)) {
    target[prop] = source[prop];
  }
}
pending…
ES5 enumerable properties
Object.keys(source).forEach(function(key) {
  Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
pending…
ES5 own properties
Object.getOwnPropertyNames(source).forEach(function(key) {
  Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
pending…
ES5 enumerable properties (array)
var keys = Object.keys(source);
for (var i = 0, len = keys.length; i < len; ++i) {
  var key = keys[i];
  Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
}
pending…
ES5 enumerable properties (array) with check
var keys = Object.keys(source);
for (var i = 0, len = keys.length; i < len; ++i) {
  var key = keys[i];
  if (key in target) {
    target[key] = source[key];
  }
  else {
    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
  }
}
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