Knockout Binding Performance Test (v4)

Revision 4 of this benchmark created by Michael on

Description

Determines which is faster: one KnockoutJS binding of 5 complex objects or 5 bindings of 1 complex object each.

Also attempting to clean up the DOM between tests.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>







<script>


var counter = 1;



var myObject = function( name ) {
      var self = this;
      self.items = [];
      for (var i = 0; i < 5; i++) {
        self.items.push(name + i);
      }
      return self;
    };

var obj = new myObject( "A" );
var obj1 = ko.mapping.fromJS( obj );

var obj = new myObject( "B" );
var obj2 = ko.mapping.fromJS( obj );

var obj = new myObject( "C" );
var obj3 = ko.mapping.fromJS( obj );

var obj = new myObject( "D" );
var obj4 = ko.mapping.fromJS( obj );

var obj = new myObject( "E" );
var obj5 = ko.mapping.fromJS( obj );


var objectAll = {
obj1:obj1,
obj2:obj2,
obj3:obj3,
obj4:obj4,
obj5:obj5
};

</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Five Bindings
var html = "";
for(var i = 1; i < 6; i++ ){
var id = "obj-" + counter + "-" + i;
html += "<span id='"+id+"' data-bind='foreach:items'><span data-bind='text:$data'></span></span>";
}
$("body").append( html);

var id = "obj-" + counter +"-";
ko.applyBindings( obj1, document.getElementById( id + 1 ) );
ko.applyBindings( obj2, document.getElementById( id + 2 ) );
ko.applyBindings( obj3, document.getElementById( id + 3 ) );
ko.applyBindings( obj4, document.getElementById( id + 4 ) );
ko.applyBindings( obj5, document.getElementById( id + 5 ) );

//Clean up DOM
for( var i = 1; i < 6; i++ ) {
    var id = "obj-" + counter + "-" + i;
    $( "#" + id ).remove();
}

counter++;
 
ready
One Binding
var html = "<div id='object-all-"+counter+"'>";
for(var i = 1; i < 6; i++ ){
var objName = "obj" + i;
html += "<span data-bind='foreach:"+objName+".items'><span data-bind='text:$data'></span></span>";
}
html += "</div>";
$("body").append( html );

var id = "object-all-" + counter;
ko.applyBindings( objectAll, document.getElementById( id ) );

//Clean up DOM
$( "#" + id ).remove();

counter++;
 
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.