Hogan.js vs Handlebars.js vs John Resig micro-template (v6)

Revision 6 of this benchmark created on

Description

Hogan.js vs Handlebars.js vs John Resig micro-template

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/hogan.js/2.0.0/hogan.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.0.0/dust-core.min.js">
</script>

<script type="text/tmpl" id="micro-template">
<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'>
<% for ( var i = 0; i < list.length; i++ ) { %>
    <li class='item'><%= list[i] %></li>
  <% } %></ul>
</div>
</script>
<script>
var handlebarsTemplate = "<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'>{{this}}</li>{{/list}}</ul></div>";

var hoganTemplate = "<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>";
</script>

Setup

window.sharedVariables = {
      header: "Header",
      header2: "Header2",
      header3: "Header3",
      header4: "Header4",
      header5: "Header5",
      header6: "Header6",
      list: ['10000000', '2', '3', '4', '5', '6', '7', '8', '9', '10']
    };
    
    (function() {
      var cache = {};
    
      window.tmpl = function tmpl(str, data) {
        // 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("obj",
          "var p=[],print=function(){p.push.apply(p,arguments);};" +
    
          // Introduce the data as local variables using with(){}
          "with(obj){p.push('" +
    
          // Convert the template into pure JavaScript
          str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'") + "');}return p.join('');");
    
        // Provide some basic currying to the user
        return data ? fn(data) : fn;
      };
    })();

Test runner

Ready to run.

Testing in
TestOps/sec
Hogan.js
var compiledTemplate = Hogan.compile(hoganTemplate);
compiledTemplate.render(sharedVariables);
ready
Handlebars.js
var compiledTemplate = Handlebars.compile(handlebarsTemplate);
compiledTemplate(sharedVariables);
ready
Micro-Template
tmpl("micro-template", sharedVariables);
ready

Revisions

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