JavaScript template language shootoff (v114)

Revision 114 of this benchmark created by Johann Chiang 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://documentcloud.github.com/underscore/underscore.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/olado/doT/raw/master/doT.js"></script>

<script src="http://github.com/olado/doT/raw/master/doU.js"></script>
<script>
  (function() {
   var cache = {};
  
   this.utmpl = function tmpl(str, mode, dt) {
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) :
  
    // Generate a reusable function that will serve as a template
    // generator (and which will be cached).
    new Function("dt", mode ?
    // mode = true: Array Join Microtemplate
    "var p=[]; p.push('" + str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^%]*%>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<%=(.+?)%>/g, "',$1,'").split("<%").join("');").split("%>").join("p.push('") + "');return p.join('');" :
    // mode = false: Concatenate Microtemplate
    "var p = ''; p+='" + str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^%]*%>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<%=(.+?)%>/g, "'; p += $1; p += '").split("<%").join("';").split("%>").join("p+='") + "'; return p;");
    // Provide some basic currying to the user
    return dt ? fn(dt) : fn;
   };
  })();
  
  doT.templateSettings = {
   begin: '<%',
   end: '%>',
   varname: 'dt'
  };
  
  doU.templateSettings = {
   evaluate: /<%([\s\S]+?)%>/g,
   interpolate: /<%=([\s\S]+?)%>/g,
   encode: /<%!([\s\S]+?)%>/g,
   varname: 'dt',
   strip: true
  };
  
  
  window.sharedVariables = {};
  window.sharedVariables.dt = {
   header: "Header",
   header2: "Header2",
   header3: "Header3",
   header4: "Header4",
   header5: "Header5",
   header6: "Header6",
   list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  };
  
  window.micro2 = "<div><h1 class='header'><%= dt.header %></h1><h2 class='header2'><%= dt.header2 %></h2><h3 class='header3'><%= dt.header3 %></h3><h4 class='header4'><%= dt.header4 %></h4><h5 class='header5'><%= dt.header5 %></h5><h6 class='header6'><%= dt.header6 %></h6><ul class='list'><% for (var i = 0, l = dt.list.length; i < l; i++) { %><li class='item'><%= dt.list[i] %></li><% } %></ul></div>";
  
  
  window.underscoreTemplate = _.template(micro2);
  
  window.resigTemplate = tmpl(micro2);
  
  window.resigTemplate2 = utmpl(micro2, true);
  
  window.resigTemplate3 = utmpl(micro2, false);
  
  window.doTtemplate = doT.template(micro2);
  
  window.doUtemplate = doU.template(micro2);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Underscore.js Template
underscoreTemplate(sharedVariables);
ready
Resig Micro-Templating.
resigTemplate(sharedVariables);
ready
Resig Micro-Templating without with(obj)
resigTemplate2(sharedVariables.dt);
ready
Resig Micro-Templating with += instead of push and join
resigTemplate3(sharedVariables.dt);
ready
doT.js
doTtemplate(sharedVariables.dt);
ready
doU.js
doUtemplate(sharedVariables.dt);
ready

Revisions

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