Knockout Foreach vs Jquery (v6)

Revision 6 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>
<div id="container">
<table id="myTable" data-bind="foreach: Items">
   <tr>
      <td data-bind="with: Col1"></td>
      <td data-bind="with: Col2"></td>
      <td data-bind="with: Col3"></td>
      <td data-bind="with: Col4"></td>
      <td data-bind="with: Col5"></td>
      <td data-bind="with: Col6"></td>
      <td data-bind="with: Col7"></td>
      <td data-bind="with: Col8"></td>
      <td data-bind="with: Col9"></td>
      <td data-bind="with: Col10"></td>
      <td data-bind="with: Col11"></td>
      <td data-bind="with: Col12"></td>
   </tr>
</table>
</div>
<table id="myTable2"></table>

Setup

var koModel = function() {
      var self = this;
      self.Items = ko.observableArray([]);
      self.update = function() {
        self.Items(mapModel());
      };
    };
    
    var jqModel = function() {
      this.Items = mapModel();
    };
    
    var mapModel = function() {
      var arr = [];
      console.log('test mapModel start');
      for (var i = 0; i < 100; i++) {
        arr.push({
          Col1: "C1R" + i,
          Col2: "C2R" + i,
          Col3: "C3R" + i,
          Col4: "C4R" + i,
          Col5: "C5R" + i,
          Col6: "C6R" + i,
          Col7: "C7R" + i,
          Col8: "C8R" + i,
          Col9: "C9R" + i,
          Col10: "C10R" + i,
          Col11: "C11R" + i,
          Col12: "C12R" + i
        });
      }
      console.log(arr);
      return arr;
    }
    
    var koM = new koModel();
    ko.applyBindings(koM, document.getElementById("container"));
    var jqM = new jqModel();
    
    function buildTable() {
      var tableContents = '';
      for (var i = 0; i < jqM.Items.length; i++) {
        tableContents += '<tr>';
        tableContents += '<td>' + jqM.Items[i].Col1 + '</td>';
        tableContents += '<td>' + jqM.Items[i].Col2 + '</td>';
        tableContents += '<td>' + jqM.Items[i].Col3 + '</td>';
        tableContents += '<td>' + jqM.Items[i].Col4 + '</td>';
        tableContents += '<td>' + jqM.Items[i].Col5 + '</td>';
        tableContents += '<td>' + jqM.Items[i].Col6 + '</td>';
        tableContents += '<td>' + jqM.Items[i].Col7 + '</td>';
        tableContents += '<td>' + jqM.Items[i].Col8 + '</td>';
        tableContents += '<td>' + jqM.Items[i].Col9 + '</td>';
        tableContents += '<td>' + jqM.Items[i].Col10 + '</td>';
        tableContents += '<td>' + jqM.Items[i].Col11 + '</td>';
        tableContents += '<td>' + jqM.Items[i].Col12 + '</td>';
        tableContents += '</tr>';
      };
      return tableContents;
    }

Test runner

Ready to run.

Testing in
TestOps/sec
Knockout
koM.update();
ready
jQuery
$('#myTable2').html(buildTable());
ready

Revisions

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