Mustache JS engine rumble: Mustache.js vs Handlebars.js vs Hogan.js vs templayed.js vs LT

JavaScript performance comparison

Revision 34 of this test case created by vody

Preparation code

<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/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/3.0.0/hogan.js"></script>
<script src="https://rawgithub.com/archan937/templayed.js/master/src/templayed.js"></script>
<script src="https://rawgithub.com/rhyzx/lt/master/lt.js"></script>

      
<script>
Benchmark.prototype.setup = function() {
  var tests = [{
    template: "<p>My name is {{name}}!</p>",
    variables: {
      name: "Paul Engel"
    }
  }, {
    template: "<p>My name is {{name}}!{{!name}}</p>",
    variables: {
      name: "Paul Engel"
    }
  }, {
    template: "<p>{{html}} {{&html}}</p>",
    variables: {
      html: "<strong>Paul Engel</strong>"
    }
  }, {
    template: "<p>{{html}} {{html}}</p>",
    variables: {
      html: "<strong>Paul Engel</strong>"
    }
  }, {
    template: "<p>This is shown!{{#show}} Psst, this is never shown{{/show}}</p>",
    variables: {}
  }, {
    template: "<p>This is shown!{{#show}} Psst, this is never shown{{/show}}</p>",
    variables: {
      show: false
    }
  }, {
    template: "<p>This is shown!{{#shown}} And, this is also shown{{/shown}}</p>",
    variables: {
      shown: true
    }
  }, {
    template: "<p>My name is {{person.first_name}} {{person.last_name}}!</p>",
    variables: {
      person: {
        first_name: "Paul",
        last_name: "Engel"
      }
    }
  }, {
    template: "{{name}}<ul>{{#names}}<li>{{name}}</li>{{/names}}</ul>{{^names}}Sorry, no people to list!{{/names}}",
    variables: {
      names: []
    }
  }, {
    template: "<p>{{name}}</p><ul>{{#names}}<li>{{name}}</li>{{/names}}</ul>{{^names}}Sorry, no people to list!{{/names}}<p>{{name}}</p>",
    variables: {
      name: "Chunk Norris",
      names: [{
        name: "Paul"
      }, {
        name: "Engel"
      }]
    }
  }, {
    template: "<ul>{{#names}}<li>{{.}}{{foo}}</li>{{/names}}</ul>",
    variables: {
      names: ["Paul", "Engel"]
    }
  }, {
    template: "<ul>{{#names}}<li>{{fullName}}</li>{{/names}}</ul>",
    variables: {
      names: [{
        firstName: "Paul",
        lastName: "Engel"
      }, {
        firstName: "Chunk",
        lastName: "Norris"
      }]
      // remove lambdas for LT don't support yet(stringify function can consume lots)
    }
  }];
  var compiled = {
    "Mustache.js": [],
    "Handlebars.js": [],
    "Hogan.js": [],
    "templayed.js": [],
    "lt": []
  };
  for (var i = 0; i < tests.length; i++) {
    var template = tests[i].template;
    compiled["Mustache.js"].push(Mustache.compile(template.replace(/\.\.\//g, "")));
    var HandlebarsT = Handlebars.compile(template);
    HandlebarsT({}); //disable Handlebars' lazy-compile
    compiled["Handlebars.js"].push(HandlebarsT);
    compiled["Hogan.js"].push(Hogan.compile(template.replace(/\.\.\//g, "")));
    compiled["templayed.js"].push(templayed(template));
    compiled["lt"].push(lt.compile(template));
  }

};
</script>

Preparation code output

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/3.0.0/hogan.js"></script> <script src="https://rawgithub.com/archan937/templayed.js/master/src/templayed.js"></script> <script src="https://rawgithub.com/rhyzx/lt/master/lt.js"></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.js
for (var i = 0; i < tests.length; i++) {
  compiled["Mustache.js"][i](tests[i].variables);
}
pending…
Handlebars.js
for (var i = 0; i < tests.length; i++) {
  compiled["Handlebars.js"][i](tests[i].variables);
}
pending…
Hogan.js
for (var i = 0; i < tests.length; i++) {
  compiled["Hogan.js"][i].render(tests[i].variables);
}
pending…
templayed.js
for (var i = 0; i < tests.length; i++) {
  compiled["templayed.js"][i](tests[i].variables);
}
pending…
LT
for (var i = 0; i < tests.length; i++) {
  compiled["lt"][i](tests[i].variables);
}
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