Mustache vs Hogan.js vs Handlebars.js

JavaScript performance comparison

Test case created by Alexey

Preparation code

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
<script src="https://raw.github.com/twitter/hogan.js/master/web/builds/2.0.0/hogan-2.0.0.min.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>


 
<script>
  Benchmark.prototype.setup = function() {
    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);
  };
</script>
    

Preparation code output

<div id='content'></div> <script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script> <script src="https://raw.github.com/twitter/hogan.js/master/web/builds/2.0.0/hogan-2.0.0.min.js"></script> <script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script> <script> Benchmark.prototype.setup = function() { 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); }; </script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Mustache 1
Mustache.to_html(template1, context);
pending…
Mustache 2
Mustache.to_html(template2, context);
pending…
Handlebars.js (uncompiled)
var compiledTemplate = Handlebars.compile(templateHb1);
compiledTemplate(contextHandlebars);
pending…
Handlebars.js (compiled)
compiledHandlebars(contextHandlebars);
pending…
Hogan.js (uncompiled)
var compiledTemplate = Hogan.compile(template1);
compiledTemplate.render(context);
pending…
Hogan.js (compiled)
compiledHogan.render(context);
pending…

Compare results of other browsers

Revisions

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

1 Comment

Albert commented :

This is great, thanks for putting it together!