put-selector vs jquery.tmpl/mustachehtml

JavaScript performance comparison

Test case created by Kris Zyp and last updated

Info

Comparing put-selector to jquery.tmpl and mustache HTML templating

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="//kzyp.dojotoolkit.org/packages/put-selector/put.js"></script>
<script src="//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 unknown unknown
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…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment