Mustache vs Hogan.js vs Handlebars.js (v3)

Revision 3 of this benchmark created by maven_peace on

Preparation HTML

<div id='content'></div>

<script src="https://raw.github.com/janl/mustache.js/0.7.0/mustache.js"></script>
<script src="http://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.js"></script>

Setup

var compiledHBTemplate,

    context = {
      messages: [
        { greeting: "Hello", subject: "World" },
        { greeting: "What's up", subject: "Dan" },
        { greeting: "How's it going", subject: "Ben?" },
        { greeting: "Hello", subject: "World" },
        { greeting: "What's up", subject: "Dan" },
        { greeting: "How's it going", subject: "Ben?" },
        { greeting: "Hello", subject: "World" },
        { greeting: "What's up", subject: "Dan" },
        { greeting: "How's it going", subject: "Ben?" },
        { greeting: "Hello", subject: "World" }
      ],
    
      "shouldRenderApple" : function() {
        return true;
      },
    
      "citation": function() {
        return {
          authorName: "Dan Gilbert",
          year: "2011"
        };
      }
    };

    var contextHandlebars = {
      messages: [
        { greeting: "Hello", subject: "World" },
        { greeting: "What's up", subject: "Dan" },
        { greeting: "How's it going", subject: "Ben?" },
        { greeting: "Hello", subject: "World" },
        { greeting: "What's up", subject: "Dan" },
        { greeting: "How's it going", subject: "Ben?" },
        { greeting: "Hello", subject: "World" },
        { greeting: "What's up", subject: "Dan" },
        { greeting: "How's it going", subject: "Ben?" },
        { greeting: "Hello", subject: "World" }
      ]
    };

Handlebars.registerHelper('citation', function() {
  return {
          authorName: "Dan Gilbert",
          year: "2011"
        };
}); 

Handlebars.registerHelper('shouldRenderApple', function() {
  return true;
});
    
    var template1 = " {{# messages }}<li>{{ greeting }}, {{ subject }} {{# shouldRenderApple }} APPLE {{/ shouldRenderApple }}</li>{{/ messages }}{{# citation }}{{ authorName }}, {{ year }}{{/ citation }}";
    
    var template2 = "{{# messages }}<li>{{ greeting }}, {{ subject }} {{# shouldRenderApple }} APPLE {{/ shouldRenderApple }}</li>{{/ messages }}{{# citation }}{{ authorName }}, {{ year }}{{/ citation }} ";

    var templateHb1 = "{{# messages }}<li>{{ greeting }}, {{ subject }} {{#shouldRenderApple}} APPLE {{/shouldRenderApple}}</li>{{/ messages }}{{# citation }}{{ authorName }}, {{ year }}{{/ citation }}";
    
    var templateHb2 = "{{# messages }}<li>{{ greeting }}, {{ subject }} {{#shouldRenderApple}} APPLE {{/shouldRenderApple}}</li>{{/ messages }}{{# citation }}{{ authorName }}, {{ year }}{{/ citation }}";

    var compiledHogan = Hogan.compile(template2);
    var compiledHandlebars = Handlebars.compile(templateHb2);
    var compiledMustache = Mustache.compile(template2);

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache 0.7
Mustache.to_html(template1, context);
ready
Mustache (compiled) 0.7
compiledMustache(context);
ready
Handlebars.js (uncompiled) 1.0.rc.1
/* Hogan and Mustache have internal compilation caches, so lets even the field a bit */
var compiledHBTemplate = typeof compiledHBTemplate === "undefined" && Handlebars.compile(templateHb1) || compiledHBTemplate;
compiledHBTemplate(contextHandlebars);
ready
Handlebars.js (compiled) 1.0.rc.1
compiledHandlebars(contextHandlebars);
ready
Hogan.js (uncompiled)
var compiledTemplate = Hogan.compile(template1);
compiledTemplate.render(context);
ready
Hogan.js (compiled)
compiledHogan.render(context);
ready

Revisions

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