Knockout Foreach vs Jquery x (v8)

Revision 8 of this benchmark created on

Description

Knockout foreach seems slow for large amounts of divs, but how slow?

http://stackoverflow.com/questions/11764755/knockout-js-very-slowly-foreach https://github.com/knockout/knockout/issues/248

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<table id="myTable" data-bind="foreach: Items">
   <tr>
      <td data-bind="text: Col1"/>
      <td data-bind="text: Col2"/>
      <td data-bind="text: Col3"/>
      <td data-bind="text: Col4"/>
      <td data-bind="text: Col5"/>
      <td data-bind="text: Col6"/>
      <td data-bind="text: Col7"/>
      <td data-bind="text: Col8"/>
      <td data-bind="text: Col9"/>
      <td data-bind="text: Col10"/>
      <td data-bind="text: Col11"/>
      <td data-bind="text: Col12"/>
   </tr>
</table>

Setup

viewModel = {
        Items: []
    };
    for (var t = 1; t <= 2; t++){
    viewModel.Items.push({
        Col1: "C1R" + t.toString(),
        Col2: "C2R" + t.toString(),
        Col3: "C3R" + t.toString(),
        Col4: "C4R" + t.toString(),
        Col5: "C5R" + t.toString(),
        Col6: "C6R" + t.toString(),
        Col7: "C7R" + t.toString(),
        Col8: "C8R" + t.toString(),
        Col9: "C9R" + t.toString(),
        Col10: "C10R" + t.toString(),
        Col11: "C11R" + t.toString(),
        Col12: "C12R" + t.toString()
    });
    }

Test runner

Ready to run.

Testing in
TestOps/sec
Knockout
ko.applyBindings(viewModel);
 
ready
jQuery
    var tableContents = document.createElement("table");
for(var i = 0 ; i < viewModel.Items.length; i++){
        var tr = document.createElement("tr");
        var td1 = document.createElement("td"); td1.innerHtml = viewModel.Items[i].Col1; tr.appendChild(td1);
        var td2 = document.createElement("td"); td2.innerHtml = viewModel.Items[i].Col2; tr.appendChild(td2);
        var td3 = document.createElement("td"); td3.innerHtml = viewModel.Items[i].Col3; tr.appendChild(td3);
        var td4 = document.createElement("td"); td4.innerHtml = viewModel.Items[i].Col4; tr.appendChild(td4);
        var td5 = document.createElement("td"); td5.innerHtml = viewModel.Items[i].Col5; tr.appendChild(td5);
        var td6 = document.createElement("td"); td6.innerHtml = viewModel.Items[i].Col6; tr.appendChild(td6);
        var td7 = document.createElement("td"); td7.innerHtml = viewModel.Items[i].Col7; tr.appendChild(td7);
        var td8 = document.createElement("td"); td8.innerHtml = viewModel.Items[i].Col8; tr.appendChild(td8);
        var td9 = document.createElement("td"); td9.innerHtml = viewModel.Items[i].Col9; tr.appendChild(td9);
        var td10 = document.createElement("td"); td10.innerHtml = viewModel.Items[i].Col10; tr.appendChild(td10);
        var td11 = document.createElement("td"); td11.innerHtml = viewModel.Items[i].Col11; tr.appendChild(td11);
        var td12 = document.createElement("td"); td12.innerHtml = viewModel.Items[i].Col12; tr.appendChild(td12);
        tableContents.appendChild(tr);
}
$('#myTable')[0].appendChild(tableContents);
 
ready

Revisions

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