JavaScript template language shootoff (v541)

Revision 541 of this benchmark created by Thox 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. Note2: @AndrewF why did you delete the latest two changes? Any comments?

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>

<script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>

<script src="http://terrainformatica.com/kite/kite.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://github.com/creationix/haml-js/raw/master/lib/haml.js"></script>

<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
<script src="http://sstephenson.github.com/eco/dist/eco.js"></script>

<script src="http://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>

<script src="http://github.com/olado/doT/raw/master/doT.js"></script>

<script src="http://github.com/olado/doT/raw/master/doU.js"></script>

<script src="http://github.com/aefxx/jQote2/raw/69b2053a13f5f180e696de9b3dba856a3c00678c/jquery.jqote2.js"></script>

<script src="http://embeddedjavascript.googlecode.com/files/ejs_0.9_alpha_1_production.js"></script>

<script src="http://github.com/pure/pure/raw/master/libs/pure.js"></script>
<div class="pure">
        <h1 class='header'></h1>
        <h2 class='header2'></h2>
        <h3 class='header3'></h3>
        <h4 class='header4'></h4>
        <h5 class='header5'></h5>
        <h6 class='header6'></h6>
        <ul class='list'>
                <li class='item'></li>
        </ul>
</div>

<script src="http://github.com/douglascrockford/JSON-js/raw/master/json2.js"></script>

<script src="http://akdubya.github.com/dustjs/dist/dust-full-0.3.0.min.js"></script>

<script>
  window.mustacheTemplate = Mustache.compile("<div><h1 class='header'>{{header}}</h1><h2 class='header2'>{{header2}}</h2><h3 class='header3'>{{header3}}</h3><h4 class='header4'>{{header4}}</h4><h5 class='header5'>{{header5}}</h5><h6 class='header6'>{{header6}}</h6><ul class='list'>{{#list}}<li class='item'>{{.}}</li>{{/list}}</ul></div>");
  
  // note: exactly the same as the mustacheTemplate above.
  window.kiteTemplate = "<div><h1 class='header'>{{header}}</h1><h2 class='header2'>{{header2}}</h2><h3 class='header3'>{{header3}}</h3><h4 class='header4'>{{header4}}</h4><h5 class='header5'>{{header5}}</h5><h6 class='header6'>{{header6}}</h6><ul class='list'>{{#list}}<li class='item'>{{.}}</li>{{/list}}</ul></div>";
  window.kiteCompiledTemplate = kite(kiteTemplate); // seems like others are testing compiled versions.
  
  window.sharedVariables = {
   header: "Header",
   header2: "Header2",
   header3: "Header3",
   header4: "Header4",
   header5: "Header5",
   header6: "Header6",
   list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  };
  
  
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache.js Template
mustacheTemplate(sharedVariables);
ready
KiTE
kiteCompiledTemplate(sharedVariables);
ready

Revisions

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