mixins vs prototypes

JavaScript performance comparison

Revision 3 of this test case created

Info

How do various methods for object creation in javascript affect performance/memory load?

Preparation code

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
Benchmark.prototype.setup = function() {
    var obj = {
        name: 'Pat',
        lastname: 'Smith',
        arms: 2,
        legs: 2,
        hair: 'brown',
        eyes: 'brown',
        age: 30,
        iq: 126,
        getFullName: function(name){
                return this.name + ' ' + this.lastname;
        },
        interests: ['skiing', 'reading', 'playing guitar']
    };
   
    var constructor = function(){
    };
    constructor.prototype = obj;
   
    var constructor2 = function(){
    return {
    name:obj.name,
    hair:obj.hair
    }
    };
};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Mixin using $.extend
var mixedIn = $.extend(obj, {
        name: 'Susie',
        gender: 'female',
        hair: 'blonde'
});
pending…
Prototypal inheritance using a constructor
var inherited = new constructor();
inherited.name = 'Bob';
inherited.gender = 'male';
inherited.hair = 'black';
pending…
Mixin using _.extend
var mixedIn = _.extend({}, obj, {
        name: 'Susie',
        gender: 'female',
        hair: 'blonde'
});
pending…
Inheritance using Object.create
var inherited = Object.create(obj);
inherited.name = 'Horkel';
inherited.gender = 'unknown';
inherited.hair = 'green';
pending…
5
var inherited = constructor2();
inherited.name = 'Bob';
inherited.gender = 'male';
inherited.hair = 'black';
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