Preparation code

<form id="knockoutForm">
  <p>knockout items:</p>
<div>
<ul data-bind="template: { name: 'knockoutTemplate', foreach: items }"></ul>
<!-- ul data-bind="foreach: items">
<li><span data-bind="text: name"></span></li>
</ul -->
</div>
</form>
<form id="jsrenderForm"></form>
<script id="jsrenderFormTemplate" type="text/x-jsrender">
  <p>
    jsrender items:
  </p>
  <div>
<ul id="list">{{for items tmpl="jsrenderTemplate" link=true /}}</ul>
</div>
</script>

<script type="text/html" id="knockoutTemplate">
<li><span data-bind="text: name"></span></li>
</script>
<script id="jsrenderTemplate" type="text/x-jsrender">
        <li><span data-link="name"></span></li>
</script>

<script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery.js">
</script>
        <script src="http://beta.pressdisplay.com/test/skapd7/scripts7/t/jsrender.js" type="text/javascript"></script>
        <script src="http://beta.pressdisplay.com/test/skapd7/scripts7/t/jquery.observable.js" type="text/javascript"></script>
        <script src="http://beta.pressdisplay.com/test/skapd7/scripts7/t/jquery.views.js" type="text/javascript"></script>
<script>
  Benchmark.prototype.setup = function() {
    var KnockoutListModel = function(items) {
        this.items = ko.observableArray(items);
        this.addItem = function(item) {
          this.items.push(item);
        };
    };
    
    var JSRenderListModel = function(items) {
        this.items = items;
        this.addItem = function(item) {
          $.observable(this.items).insert(this.items.length, item);
        };
        this.removeAll = function() {
          $.observable(this.items).remove(0, this.items.length);
        };
    };
    
    $.templates( 'jsrenderTemplate', "#jsrenderTemplate" );
    $.templates( 'jsrenderFormTemplate', "#jsrenderFormTemplate" );
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

var model = new KnockoutListModel([{name:"Alpha"}, {name:"Beta"}, {name:"Gamma"}]);
ko.applyBindings(model, $("#knockoutForm")[0]);

for (var i = 0; i < 150; i++) {
  model.addItem({name:("New_" + i)});
}

var model = new JSRenderListModel([{name:"Alpha"}, {name:"Beta"}, {name:"Gamma"}]);

$.link.jsrenderFormTemplate("#jsrenderForm", model);

for (var i = 0; i < 150; i++) {
  model.addItem({name:("New_" + i)});
}

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:

• Revision 3: published by Sergey on 24th August 2012
• Revision 6: published on 6th February 2013
• Revision 7: published on 6th February 2013
• Revision 8: published on 6th February 2013
• Revision 9: published on 6th February 2013

0 comments