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

Revision 48 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/2.2.1/mustache.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/3.0.2/hogan.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/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 compiledHogan = Hogan.compile(template2);
    var compiledHandlebars = Handlebars.compile(templateHb2);

Test runner

Ready to run.

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

Revisions

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