Knockout_JSRender_List

JavaScript performance comparison

Revision 6 of this test case created

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="https://github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery.js">
</script>
        <script src="https://raw.github.com/BorisMoore/jsviews/master/jsrender.js" type="text/javascript"></script>
        <script src="https://raw.github.com/BorisMoore/jsviews/master/jquery.observable.js" type="text/javascript"></script>
        <script src="https://raw.github.com/BorisMoore/jsviews/master/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

knockout items:

    Test runner

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

    Java applet disabled.

    Testing in unknown unknown
    Test Ops/sec
    KnockoutList
    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)});
    }
    pending…
    JSRenderList
    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)});
    }
    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