doT.js vs. Handlebars vs. Jqote2.js vs. JsRender.js vs. Tempo.js vs. Underscore.js (v2)

Revision 2 of this benchmark created on

Description

A test to show benchmark for popular JS templaters.

Preparation HTML

<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>

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

Revisions

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