JavaScript template language shootoff (v719)

Revision 719 of this benchmark created on

Description

A brief comparison of some JavaScript templating engines on a short template: 6 header tags, and 10 list items.

Note: When adding a new test, please ensure that your test returns the same HTML string (or equivalent DOM fragment) as the others.

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>
<script src="http://github.com/downloads/wycats/handlebars.js/handlebars-0.9.0.pre.4.js"></script>
<script src="http://gist.github.com/raw/550881/29bb186167079c0b33ab6e9d50d779f37860cfa4/micro.js"></script>
<script src="http://gist.github.com/raw/860205/8444586913ab249c619671b8f5054fc92dddf643/micro2.js"></script>
<script src="http://gist.github.com/raw/860240/cd98cacbdeee7eb2cfb2ca3ca76638dae2a5b1af/micro3.js"></script>
<script src="http://ectjs.com/js/coffee-script.js"></script>
<script src="http://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<script src="https://github.com/olado/doT/raw/master/doT.js"></script>
<script src="https://github.com/olado/doT/raw/master/doU.js"></script>
<script src="http://embeddedjavascript.googlecode.com/files/ejs_0.9_alpha_1_production.js"></script>
<script src="http://ectjs.com/js/ect.min.js"></script>
<script src="https://github.com/HenrikJoreteg/ICanHaz.js/raw/master/ICanHaz.min.js"></script>

<script>
  window.micro = "<div><ul class='list'><% for (var i = 0, l = list.length; i < l; i++) { %><li class='item'><%= list[i] %></li><% } %></ul></div>";
  
  window.micro2 = "<div><ul class='list'><% for (var i = 0, l = data.list.length; i < l; i++) { %><li class='item'><%= data.list[i] %></li><% } %></ul></div>";
  
  window.resigTemplate = tmpl(micro);
  
  window.resigTemplate2 = tmpl2(micro2);
  
  window.resigTemplate3 = tmpl3(micro2);

  window.mustacheTemplate = "<div><ul class='list'>{{#list}}<li class='item'>{{.}}</li>{{/list}}</ul></div>";

  window.handlebarsTemplate = Handlebars.compile("<div><ul class='list'>{{#each list}}<li class='item'>{{this}}</li>{{/each}}</ul></div>");

  window.ejs = new EJS({
   text: micro
  });

  window.jQueryTemplate = $.template(null, "<div><ul class='list'>{{each list}}<li class='item'>{{html $value}}</li>{{/each}}</ul></div>");

  window.doTtemplate = doT.template("<div><ul class='list'>{{ for (var i = 0, l = it.list.length; i < l; i++) { }}<li class='item'>{{= it.list[i] }}</li>{{ } }}</ul></div>");
  
  window.doUtemplate = doU.template("<div><ul class='list'>{{ for (var i = 0, l = it.list.length; i < l; i++) { }}<li class='item'>{{= it.list[i] }}</li>{{ } }}</ul></div>");

  window.ectTemplate = "<div><ul><% for i in @list : %><li class='item'><%- i %></li><% end %></ul></div>";

  window.ichTemplate = "<div><ul><% for i in @list : %><li class='item'><%- i %></li><% end %></ul></div>";

  var root = {};
  window.ect = ECT({ cache : false, root : {
    'template': window.ectTemplate
  }});

  ich.addTemplate('template', window.mustacheTemplate)

  var list = [];
  for (var i = 0; i < 2000; i++) {
    list.push(i);
  }

  window.sharedVariables = {
   list: list
  };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache.js Template
Mustache.to_html(mustacheTemplate, sharedVariables);
ready
Resig Micro-Templating.
resigTemplate(sharedVariables);
ready
jQuery Templates
jQueryTemplate($, {
  data: sharedVariables
}).join("");
ready
Handlebars.js
handlebarsTemplate(sharedVariables);
ready
doT.js
doTtemplate(sharedVariables);
ready
doU.js
doUtemplate(sharedVariables);
ready
ejs
ejs.render(sharedVariables);
ready
Resig Micro-Templating without with(obj)
resigTemplate2(sharedVariables);
ready
Resig Micro-Templating with += instead of push and join
resigTemplate3(sharedVariables);
ready
ECT
ect.render('template', sharedVariables);
ready
I Can Haz
ich.template(sharedVariables)
ready

Revisions

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