put-selector vs jquery.tmpl/mustachehtml

JavaScript performance comparison

Test case created by Kris Zyp and last updated

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="https://kzyp.dojotoolkit.org/packages/put-selector/put.js"></script>
<script src="https://kzyp.dojotoolkit.org/packages/mustache/mustache.js"></script>
<script>
  myTemplate = jQuery.template(null, '<div class="parent"><span class="name">${name}</span><span class="age">${age}</span></div>');
</script>
    

Preparation code output

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
mustache
var target = document.createElement("div"); // as same code for target for consistency
target.innerHTML = Mustache.to_html('<div class="parent"><span class="name">{{name}}</span><span class="age">{{age}}</span></div>',{name:"Kris", age:33});
pending…
jquery.tmpl
var target = document.createElement("div"); // as same code for target for consistency
var newElement = jQuery.tmpl('<div class="parent"><span class="name">${name}</span><span class="age">${age}</span></div>',{name:"Kris", age:33}).appendTo(target);
pending…
put-selector var sub
var target = document.createElement("div"); // as same code for target for consistency
var newElement = put(target, "div.parent span.name $+span.age $", "Kris", 33);
pending…
jquery.tmpl compiled
var target = document.createElement("div"); // as same code for target for consistency
var newElement = jQuery.tmpl(myTemplate,{name:"Kris", age:33}).appendTo(target);
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.

0 Comments