Mustache vs Hogan.js vs Handlebars.js IE compatible (v14)

Revision 14 of this benchmark created on

Preparation HTML

<div id='content'>
</div>
<script type="text/html" id="icanhazTmpl">
{{# messages }}<li>{{ greeting }}, {{ subject }} {{#shouldRenderApple}} APPLE {{/shouldRenderApple}}</li>{{/ messages }}{{# citation }}{{ authorName }}, {{ year }}{{/ citation }}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/2.0.0/hogan.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ICanHaz.js/0.10/ICanHaz.min.js">
</script>

Setup

var 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 compiledMustache = Mustache.compile(template2);
    var compiledHogan = Hogan.compile(template2);
    var compiledHandlebars = Handlebars.compile(templateHb2);

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache 1 (uncompiled)
Mustache.to_html(template1, context);
ready
Mustache 2 (compiled)
compiledMustache(context);
ready
Handlebars.js (uncompiled)
var compiledTemplate = Handlebars.compile(templateHb1);
compiledTemplate(contextHandlebars);
ready
Handlebars.js (compiled)
compiledHandlebars(contextHandlebars);
ready
Hogan.js (uncompiled)
var compiledTemplate = Hogan.compile(template1);
compiledTemplate.render(context);
ready
Hogan.js (compiled)
compiledHogan.render(context);
ready
ICanHaz
ich.icanhazTmpl(context, true);
ready

Revisions

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