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

Revision 18 of this benchmark created on

Preparation HTML

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/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/3.0.0/hogan.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
<script src="https://g.tbcdn.cn/kissy/k/1.4.2/??seed-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 templateX1 = "{{#messages}}<li>{{greeting}}, {{subject}} {{#shouldRenderApple}} APPLE {{/shouldRenderApple}}</li>{{/message}}{{#citation}}{{authorName}}, {{year}}{{/citation}}";
    var compiledHogan = Hogan.compile(template2);
    var compiledHandlebars = Handlebars.compile(templateHb2);

KISSY.add('xtpl', function (S, require, exports, module) {
        return function (scope, S, undefined) {
            var buffer = "",
                config = this.config,
                engine = this,
                moduleWrap, utils = config.utils;
            if (typeof module !== "undefined" && module.kissy) {
                moduleWrap = module;
            }
            var runBlockCommandUtil = utils.runBlockCommand,
                renderOutputUtil = utils.renderOutput,
                getPropertyUtil = utils.getProperty,
                runInlineCommandUtil = utils.runInlineCommand,
                getPropertyOrRunCommandUtil = utils.getPropertyOrRunCommand;
            buffer += '';
            var config2 = {};
            config2.fn = function (scope) {
                var buffer = "";
                buffer += '<li>';
                var id0 = getPropertyOrRunCommandUtil(engine, scope, {}, "greeting", 0, 1);
                buffer += renderOutputUtil(id0, true);
                buffer += ', ';
                var id1 = getPropertyOrRunCommandUtil(engine, scope, {}, "subject", 0, 1);
                buffer += renderOutputUtil(id1, true);
                buffer += ' ';
                var config3 = {};
                config3.fn = function (scope) {
                    var buffer = "";
                    buffer += ' APPLE ';
                    return buffer;
                };
                buffer += runBlockCommandUtil(engine, scope, config3, "shouldRenderApple", 1);
                buffer += '</li>';
                return buffer;
            };
            buffer += runBlockCommandUtil(engine, scope, config2, "messages", 1);
            buffer += '';
            var config4 = {};
            config4.fn = function (scope) {
                var buffer = "";
                buffer += '';
                var id2 = getPropertyOrRunCommandUtil(engine, scope, {}, "authorName", 0, 1);
                buffer += renderOutputUtil(id2, true);
                buffer += ', ';
                var id3 = getPropertyOrRunCommandUtil(engine, scope, {}, "year", 0, 1);
                buffer += renderOutputUtil(id3, true);
                buffer += '';
                return buffer;
            };
            buffer += runBlockCommandUtil(engine, scope, config4, "citation", 1);
            return buffer;
        };
});

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)
var compiledTemplate = Hogan.compile(template1);
compiledTemplate.render(context);
ready
Hogan.js (compiled)
compiledHogan.render(context);
ready
xtemplate (uncompiled)
// async test
KISSY.use('xtemplate', function(S, XTemplate) {
  new XTemplate(templateX1, {
    commands: {
      'citation': function(scopes, option) {
        return {
          authorName: "Dan Gilbert",
          year: "2011"
        };
      },
      'shouldRenderApple': function() {
        return true;
      }

    }
  }).render(contextHandlebars);
  deferred.resolve();
});
ready
xtemplate (compiled)
// async test
KISSY.use('xtemplate, xtpl', function(S, XTemplate, tpl) {
  var render = new XTemplate(tpl, {
    commands: {
      'citation': function(scopes, option) {
        return {
          authorName: "Dan Gilbert",
          year: "2011"
        };
      },
      'shouldRenderApple': function() {
        return true;
      }

    }
  }).render(contextHandlebars);
  deferred.resolve();
});
ready

Revisions

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