template vs repeat in Knockout.js

JavaScript performance comparison

Revision 23 of this test case created by thelinuxlich

Preparation code

<div id="main" style="display: none"></div>

<script id="template" type="text/html">
    <table data-bind="template: { foreach: rows }">
        <tr data-bind="template: { foreach: cells }">
            <td data-bind="text: 'Cell ' + id()"></td>
        </tr>
    </table>
</script>

<script id="repeat" type="text/html">
    <table>
        <tr data-bind="repeat: { foreach: rows, item: '$row' }">
            <td data-bind="repeat: { foreach: $row().cells, item: '$cell', bind: 'text: \'Cell \' + $cell().id()'}"></td>
        </tr>
    </table>
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js">
</script>
<script type='text/javascript' src="https://raw.github.com/mbest/knockout-repeat/master/knockout-repeat.js"></script>


<script>
function Cell(id) {
    this.id = ko.observable(id);  
}
function Row(id) {
    this.id = ko.observable(id);
    this.cells = ko.observableArray();
}

var viewModel = {
    rows: ko.observableArray()
};

for (var i = 0; i < 10; i++) {
    var row = new Row(i);
   
    for (var j = 0; j < 10; j++) {
        row.cells.push(new Cell(i + " - " + j));
    }
    viewModel.rows.push(row);
}
</script>
<script>
Benchmark.prototype.setup = function() {
    ko.removeNode($("#main")[0]);
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
repeat
var main = $("#main");
main.attr("data-bind", "template: 'repeat'");
ko.applyBindings(viewModel, main[0]);
 
pending…
template
var main = $("#main");
main.attr("data-bind", "template: 'template'");
ko.applyBindings(viewModel, main[0]);
 
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment