Knockout_JSRender_List

JavaScript performance comparison

Revision 10 of this test case created and last updated

Preparation code

<form id="knockoutForm">
  <p>knockout items:</p>
<div>
<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://cloud.github.com/downloads/knockout/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) {
        var self = this;
        self.items = ko.observableArray(items);
        self.addItem = function(item) {
          self.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" );
   
    var model = new KnockoutListModel([{name:"Alpha"}, {name:"Beta"}, {name:"Gamma"}]);
    ko.applyBindings(model, $("#knockoutForm")[0]);
   
    var model = new JSRenderListModel([{name:"Alpha"}, {name:"Beta"}, {name:"Gamma"}]);
   
    $.link.jsrenderFormTemplate("#jsrenderForm", model);
};
</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
model.addItem({name:("New_" + 1)});
pending…
JSRenderList
model.addItem({name:("New_" + 1)});
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