vash precompile vs doT.js vs. Handlebars vs. Jqote2.js vs. JsRender.js vs. Tempo.js vs. Underscore.js (v3)

Revision 3 of this benchmark created on

Description

A test to show benchmark for popular JS templaters.

Preparation HTML

<script src="//raw.github.com/kirbysayshi/Vash/master/build/vash.js"></script>
<script src="//gist.github.com/kirbysayshi/3411585/raw/vashmini.js"></script>
<script src="//gist.github.com/kirbysayshi/3411585/raw/vashmicro.js"></script>
<script src="//gist.github.com/kirbysayshi/3411585/raw/vashpico.js"></script>
<script src="//gist.github.com/kirbysayshi/3411585/raw/vstr.js"></script>
<script id="tpl" type="text/vash">
yes what @it.Do you @it.realize()?? That "@it.everyone[0]" you know "@it.everyone('param')" someday will "@it.everyone('param').go" die? 
  
Blah blah blah blah blah blah blah blah blah blah 

blah @( (it.blah) + (it.blah) ? (it.blah + it.blah) : it.blah ) blah
  
<yep></nope>
<text>We re @it.floating in space!</text>
</script>




<script type="text/html" id="tempo">
<li class="people {{gender}}"><span class="name">{{first_name}}{% if last_name %} {{last_name}}{% if %}</span><span class="age">{{age}}</span></li>
</script>

<script type="text/javascript" src="https://rawgithub.com/jashkenas/underscore/master/underscore.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/aefxx/jQote2/master/jquery.jqote2.js">
</script>
<script type="text/javascript" src="https://rawgithub.com/olado/doT/master/doT.js">
</script>
<script type="text/javascript" src="https://rawgithub.com/BorisMoore/jsrender/master/jsrender.js" ></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.0/handlebars.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/twigkit/tempo/master/tempo.js"></script>

<script type="text/javascript">
window.sharedVariables = [{
  first_name: 'Alex',
  last_name: null,
  age: 24,
  gender: 'male'
},
{
  first_name: 'Jane',
  last_name: 'Painkiller',
  age: 26,
  gender: 'female'
}];

window.dotTemplate = '{{~it:x}}<li class="people {{=x.gender}}"><span class="name">{{=x.first_name}}{{? x.last_name}} {{=x.last_name}}{{?}}</span><span class="age">{{=x.age}}</span></li>{{~}}';

window.dotCompiled = doT.template(dotTemplate);

window.handlebarsTemplate = '{{#.}}<li class="people {{gender}}"><span class="name">{{first_name}}{{#if last_name}} {{last_name}}{{/if}}</span><span class="age">{{age}}</span></li>{{/.}}';

window.handlebarsCompiled = Handlebars.compile(handlebarsTemplate);

window.jqoteTemplate = '<% for(var i = 0; i < this.length; i++) { %><li class="people <%=this[i].gender%>"><span class="name"><%=this[i].first_name%><% if(this[i].last_name) { %> <%=this[i].last_name%><% } %></span><span class="age"><%=this[i].age%></span></li><% } %>';

window.jqoteCompiled = $.jqotec(jqoteTemplate);

window.jsRenderTemplate = '<li class="people {{:gender}}"><span class="name">{{:first_name}}{{if last_name}} {{:last_name}}{{/if}}</span><span class="age">{{:age}}</span></li>';

window.jsRenderCompiled = $.templates(jsRenderTemplate);

window.tempoTemplate = document.getElementById("tempo");

window.tempoCompiled = Tempo.prepare(tempoTemplate);

window.underscoreTemplate = '<% _.each(data, function(x) { %><li class="people <%=x.gender%>"><span class="name"><%=x.first_name%><% if(x.last_name) { %> <%=x.last_name%><% } %></span><span class="age"><%=x.age%></span></li><% }); %>';

window.underscoreCompiled = _.template(underscoreTemplate);
</script>

Setup

var tplStr = document.getElementById('tpl').innerHTML;
    
    var tplVash = vash.compile(tplStr, { modelName: 'it', debug: false })
        ,tplMini = vashmini.compile(tplStr)
        ,tplMicro = vashmicro.compile(tplStr)
        ,tplPico = vashpico.compile(tplStr)
        ,tplVstr = vstr(tplStr);
    
    var model = { 
        Do: 'DO', 
        realize: function(){ return 'REALIZE' }, 
        everyone: function(p){ return { go: p }; }, 
        floating: 'FLOATING' 
    }

Test runner

Ready to run.

Testing in
TestOps/sec
doT.js
doT.template(dotTemplate)(sharedVariables);
ready
Handlebars.js
Handlebars.compile(handlebarsTemplate)(sharedVariables);
ready
jQote2.js
$.jqote($.jqotec(jqoteTemplate), sharedVariables);
ready
jsRender.js
$.templates(jsRenderTemplate).render(sharedVariables);
ready
Tempo.js
Tempo.prepare(tempoTemplate).render(sharedVariables);
ready
Underscore.js
_.template(underscoreTemplate, {data: sharedVariables});
ready
doT.js (precompiled)
dotCompiled(sharedVariables);
ready
Handlebars.js (precompiled)
handlebarsCompiled(sharedVariables);
ready
jQote2.js (precompiled)
$.jqote(jqoteCompiled, sharedVariables);
ready
jsRender.js (precompiled)
jsRenderCompiled.render(sharedVariables);
ready
Tempo.js (precompiled)
tempoCompiled.render(sharedVariables);
ready
Underscore.js (precompiled)
underscoreCompiled({data: sharedVariables});
ready
Vash
tplVash(model);
ready
VStr
tplVstr(model);
ready

Revisions

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