Performance of Foreach and Template binding in knockout - performance

Question

Have been looking into the performance issues with the foreach and template binding. In our single page app, we have nested foreach/templates. Below is the jsperf url, which gives the information on a plain array rendered without a foreach and the one with foreach; where the test with title "Expanded loop markup" is better than the "Nested foreach" binding.
Also observed that the corrsponding "foreach via template" tests for nested and expanded are much more time consuming than the ones without foreach via template.
jsperf url:
http://jsperf.com/knockout-nested-foreach-vs-expanded-markup/2
Would appreciate your help on the performance with knockout 3.1.0
The performance issue is present with the knockout 3.2 version as well.
Want to know how to decrease the load time with nested foreach and/or template bindings.

Answer 1

In line with what Hans outlined, if you are really looking to squeeze the most performance out of the client-side. A custom binding working directly with the collection, building HTML as a string and injecting it using something like element.innerHTML.
A simple example below:
ko.bindingHandlers.innerHtml = {
init: function (element, valueAccessor) {
var lst = ko.unwrap(valueAccessor());
if (lst) {
var html = '';
for (var i = 0; i < lst.length; i++) {
html += '<li>' + lst[i] + '</li>';
}
if (html)
element.innerHTML = html;
}
}
};
var vm = function(){
var self = this;
self.lst = ko.observableArray();
for (var i = 0; i < 100; i++) {
var ary = [];
for (var j = 0; j < 1000; j++)
{
ary.push(j)
}
self.lst.push({ num: i, numAry: ary});
}
};
ko.applyBindings(new vm());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: $data.lst">
<li>
<span data-bind="text: num"></span>
<ul data-bind="innerHtml: numAry"></ul>
</li>
</ul>