JavaScript template language shootoff

JavaScript performance comparison

Revision 724 of this test case created

Info

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 code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://gist.github.com/raw/550881/29bb186167079c0b33ab6e9d50d779f37860cfa4/micro.js"></script>
<script src="http://gist.github.com/raw/860240/cd98cacbdeee7eb2cfb2ca3ca76638dae2a5b1af/micro3.js"></script>
<script src="https://github.com/olado/doT/raw/master/doU.js"></script>
<script src="http://ectjs.com/js/coffee-script.js"></script>
<script src="http://ectjs.com/js/ect.min.js"></script>
<script src="http://jsmart.googlecode.com/files/smart-2.9.min.js"></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.smartTemplate = "<div><ul class='list'>{foreach $list as $i}<li class='item'>{$i}</li>{/foreach}</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.resigTemplate = tmpl(micro);
   
  window.resigTemplate3 = tmpl3(micro2);

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

  window.smart = new jSmart(window.smartTemplate);

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

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

Preparation code output

window.micro = "
    <% for (var i = 0, l = list.length; i < l; i++) { %>
  • <%= list[i] %>
  • <% } %>
"; window.micro2 = "
    <% for (var i = 0, l = data.list.length; i < l; i++) { %>
  • <%= data.list[i] %>
  • <% } %>
"; window.smartTemplate = "
    {foreach $list as $i}
  • {$i}
  • {/foreach}
"; window.doUtemplate = doU.template("
    {{ for (var i = 0, l = it.list.length; i < l; i++) { }}
  • {{= it.list[i] }}
  • {{ } }}
"); window.ectTemplate = "
    <% for i in @list : %>
  • <%- i %>
  • <% end %>
"; window.resigTemplate = tmpl(micro); window.resigTemplate3 = tmpl3(micro2); var root = {}; window.ect = ECT({ cache : false, root : { 'template': window.ectTemplate }}); window.smart = new jSmart(window.smartTemplate); var list = []; for (var i = 0; i < 2000; i++) { list.push(i); } window.sharedVariables = { list: list };

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Resig Micro-Templating.
resigTemplate(sharedVariables);
pending…
doU.js
doUtemplate(sharedVariables);
pending…
Resig Micro-Templating with += instead of push and join
resigTemplate3(sharedVariables);
pending…
ECT
ect.render('template', sharedVariables);
pending…
jSmart
smart.fetch(sharedVariables);
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. Here’s a list of current revisions for this page:

0 comments

Add a comment