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

Revision 12 of this benchmark created on

Description

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

xtpl is improved 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="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.min.js">
</script>
<script src="http://yourjavascript.com/53013082411/dust-full-1-2-3-min.js"></script>

<script type="text/tmpl" id="microtemplate">
<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">
<% var i = 0, len = list.length; for ( ; i < len; 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>";

var xtplTemplate = '<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>{%=xxxx%}<h6 class="header6">{%=header6%}</h6><ul class="list">{%js var i=0, alen=xtplData.list.length; for ( i=0; i < alen; i++ ) { js%} <li class="item">{%=list[i]%}</li> {%js } js%}</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']
          };
    
    // Simple JavaScript Templating
    // John Resig - http://ejohn.org/ - MIT Licensed
    (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;
      };
    })();
    
    //== xtpl
    (function(){this.xtpl=function xtpl(templatestring,data){var ret='',err='';try{var rdata=/{%=\s*(.+?)\s*%}/g,rfunc=/{%=\s*\(\s*(.+?)\s*\)\s*%}/g,xfn=new Function("xtplData","var arr=[]; arr.push('"+templatestring.replace(/[\r\t\v\n\b]/g,"").split("'").join("\\'").split("{%js").join("');").replace(rfunc,"',(xtplData.$1),'").replace(rdata,"',(xtplData.$1)?xtplData.$1:'','").split("js%}").join("; arr.push('")+"'); return arr.join('');")}catch(err){txt="xtpl: There is an error inside the template string\n\n";txt+="Click OK to continue.\n\n";alert(txt);return''}if(!data){return xfn}try{ret=xfn(data)}catch(err){txt="xtpl: Error occured when generating the HTML from the template \n\n";txt+="Click OK to continue.\n\n";alert(txt);return''}return ret}})();
    
    window.compiledHoganTemplate = Hogan.compile(hoganTemplate);
    window.compiledHandlebarsTemplate = Handlebars.compile(handlebarsTemplate);
    window.compiledDustTemplate = dust.compileFn(handlebarsTemplate);
    window.compiledXtplTemplate = xtpl(xtplTemplate);
    window.compiledMicroTemplate = tmpl(document.getElementById("microtemplate").innerHTML);

Test runner

Ready to run.

Testing in
TestOps/sec
Hogan.js
compiledHoganTemplate.render(sharedVariables);
ready
Handlebars.js
compiledHandlebarsTemplate(sharedVariables);
ready
Micro-Template
compiledMicroTemplate(sharedVariables);
ready
Dust.js
compiledDustTemplate(sharedVariables, function(){});
ready
xtpl
compiledXtplTemplate(sharedVariables);
ready

Revisions

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