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

Revision 8 of this benchmark created on

Description

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

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-rc.4/handlebars.min.js">
</script>
<script src="http://yourjavascript.com/53013082411/dust-full-1-2-3-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>";

var dustTemplate = "<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;
      };
    })();
    
    
    window.compiledHoganTemplate = Hogan.compile(hoganTemplate);
    window.compiledHandlebarsTemplate = Handlebars.compile(handlebarsTemplate);
    window.compiledDustTemplate = dust.compileFn(handlebarsTemplate);

Test runner

Ready to run.

Testing in
TestOps/sec
Hogan.js
compiledHoganTemplate.render(sharedVariables);
ready
Handlebars.js
compiledHandlebarsTemplate(sharedVariables);
ready
Micro-Template
tmpl("micro-template", sharedVariables);
ready
Dust.js
compiledDustTemplate(sharedVariables, function(){});
ready

Revisions

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