Mustache vs Hogan.js vs Handlebars.js IE compatible

JavaScript performance comparison

Revision 10 of this test case created by Alexey

Preparation code

<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>
<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>

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…
ICanHaz
ich.icanhazTmpl(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.

0 Comments