Knockout Foreach vs Jquery (v3)

Revision 3 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 \n https://github.com/knockout/knockout/issues/248

Preparation HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.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

var koModel = function() {
      var self = this;
      self.Items = ko.observableArray([]);
      self.update = function() {
        self.Items(mapModel());
      };
    };
    
    var jqModel = function() {
      this.Items = mapModel();
    };
    
    function mapModel() {
      var arr = [];
      console.log('test mapModel start');
      for (var t = 0; t < 100; t++) {
        arr.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()
        });
      }
      console.log(arr);
      return arr;
    }
    
    var koM = new koModel();
    ko.applyBindings(koM);

Test runner

Ready to run.

Testing in
TestOps/sec
Knockout
koM.update()
ready
jQuery
var viewModel = new jqModel();
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.