Knockout Foreach vs Jquery x (v7)

Revision 7 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 = '';
for(var i = 0 ; i < viewModel.Items.length; i++){
      tableContents += '<tr>';
      tableContents += '<td>' + viewModel.Items[i].Col1 + '</td>';
      tableContents += '<td>' + viewModel.Items[i].Col2 + '</td>';
      tableContents += '<td>' + viewModel.Items[i].Col3 + '</td>';
      tableContents += '<td>' + viewModel.Items[i].Col4 + '</td>';
      tableContents += '<td>' + viewModel.Items[i].Col5 + '</td>';
      tableContents += '<td>' + viewModel.Items[i].Col6 + '</td>';
      tableContents += '<td>' + viewModel.Items[i].Col7 + '</td>';
      tableContents += '<td>' + viewModel.Items[i].Col8 + '</td>';
      tableContents += '<td>' + viewModel.Items[i].Col9 + '</td>';
      tableContents += '<td>' + viewModel.Items[i].Col10 + '</td>';
      tableContents += '<td>' + viewModel.Items[i].Col11 + '</td>';
      tableContents += '<td>' + viewModel.Items[i].Col12 + '</td>';
      tableContents += '</tr>';
}
$('#myTable').html(tableContents);
 
ready

Revisions

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