mixins vs prototypes

JavaScript performance comparison

Revision 2 of this test case created by cemckinley


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

Preparation code

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></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;

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

Compare results of other browsers


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:


Comment form temporarily disabled.

Add a comment