Knockout: nested foreach vs expanded markup

Benchmark created by Maciek on


Preparation HTML

<table id="testCase1" data-bind="foreach: items1">
   <tr data-bind="foreach: columns">
      <td data-bind="text: $data"/>
   </tr>
</table>

<table id="testCase2" data-bind="foreach: items2">
   <tr>
      <td data-bind="text: columns[0]"/>
      <td data-bind="text: columns[1]"/>
      <td data-bind="text: columns[2]"/>
      <td data-bind="text: columns[3]"/>
      <td data-bind="text: columns[4]"/>
      <td data-bind="text: columns[5]"/>
      <td data-bind="text: columns[6]"/>
      <td data-bind="text: columns[7]"/>
      <td data-bind="text: columns[8]"/>
      <td data-bind="text: columns[9]"/>
   </tr>
</table>

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>

<script>
var model = {
   items1: ko.observable([]),
   items2: ko.observable([])
};

var items = [];

for (var i = 0; i < 10; i++) {
  var item = { columns : [] };
  for (var j = 0; j < 10; j++) {
    item.columns.push(i.toString() + ":" + j.toString());
  }
  items.push(item);
}

ko.applyBindings(model);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Nested foreach
model.items1(items);
model.items1([]);
ready
Expanded loop markup
model.items2(items);
model.items2([]);
ready

Revisions

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

  • Revision 1: published by Maciek on
  • Revision 2: published by Rupesh Kokal on
  • Revision 4: published by Raju on
  • Revision 5: published by xtras on
  • Revision 6: published by Nuno Cruz on