Handlebars.js vs Mustache.js (v42)

Revision 42 of this benchmark created by Eric on

Preparation HTML

<style type="text/css">
#output { overflow: hidden; }
#output .sample { width: 30%; padding: 1%; border: 1px solid #ccc; float: left; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.3.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta2/handlebars.min.js"></script>
<script id="template_one" type="text/template">
<h3>{{header}}</h3>
<ul>
    {{#items}}
        {{#first}}<li><strong>{{name}}</strong></li>{{/first}}
        {{^first}}<li>{{#link}}<a href="{{url}}">{{/link}}{{name}}{{#link}}</a>{{/link}}</li>{{/first}}
    {{/items}}
</ul>
{{#double}}
    <p>Double rainbow!</p>
{{/double}}
</script>
<div id="output">
    <div class="sample">
        <h2>Mustache Renders</h2>
        <div id="mu"></div>
    </div>
    <div class="sample">
        <h2>Handlebars Renders</h2>
        <div id="hb"></div>
    </div>
    <div class="sample">
        <h2>CodeGen Renders</h2>
        <div id="cg"></div>
    </div>
</div>
<script>
  var template = document.getElementById('template_one').innerText,
      data = {
          "header": "Colors",
          "items": [
              { "name": "rainbow", "first": true, "url": "#Rainbow" },
              { "name": "red", "link": true, "url": "#Red" },
              { "name": "orange", "link": true, "url": "#Orange" },
              { "name": "yellow", "link": true, "url": "#Yellow" },
              { "name": "green", "link": true, "url": "#Green" },
              { "name": "blue", "link": true, "url": "#Blue" },
              { "name": "purple", "link": true, "url": "#Purple" },
              { "name": "white", "link": false, "url": "#While" },
              { "name": "black", "link": false, "url": "#Black" }
          ],
          "double": true
      },
      hb_compiled;
  
  ui.benchmarks[1].setup = function() {
      hb_compiled = null;
  };
  
  ui.benchmarks[2].setup = function() {
      hb_compiled = Handlebars.compile(template);
  };
  
  document.getElementById('mu').innerHTML = Mustache.to_html(template, data);
  document.getElementById('hb').innerHTML = Handlebars.compile(template)(data);

function StrToHtml(v) { return new Option(v).innerHTML };
  var codegen = function (d) {
        return ""
        +"<h3>"
        +StrToHtml(d["header"]||"")
        +"</h3>\r\n<ul>\r\n    "
        +(function (d,p) {
                var r = "", b=d?(d instanceof Array)?d:[p]:[];
                for (var e in b) {
                        d = b[e]; r += ""
                        +"\r\n        "
                        +(function (d,p) {
                                var r = "", b=d?(d instanceof Array)?d:[p]:[];
                                for (var e in b) {
                                        d = b[e]; r += ""
                                        +"<li><strong>"
                                        +StrToHtml(d["name"]||"")
                                        +"</strong></li>"
                                }
                                return r
                        })(d["first"],d)
                        +"\r\n        "
                        +(d["first"]?"":""
                        +"<li>"
                        +(function (d,p) {
                                var r = "", b=d?(d instanceof Array)?d:[p]:[];
                                for (var e in b) {
                                        d = b[e]; r += ""
                                        +"<a href=\""
                                        +StrToHtml(d["url"]||"")
                                        +"\">"
                                }
                                return r
                        })(d["link"],d)
                        +StrToHtml(d["name"]||"")
                        +(function (d,p) {
                                var r = "", b=d?(d instanceof Array)?d:[p]:[];
                                for (var e in b) {
                                        d = b[e]; r += ""
                                        +"</a>"
                                }
                                return r
                        })(d["link"],d)
                        +"</li>")
                        +"\r\n    "
                }
                return r
        })(d["items"],d)
        +"\r\n</ul>\r\n"
        +(function (d,p) {
                var r = "", b=d?(d instanceof Array)?d:[p]:[];
                for (var e in b) {
                        d = b[e]; r += ""
                        +"\r\n    <p>Double rainbow!</p>\r\n"
                }
                return r
        })(d["double"],d)
        +"\r\n"
};

  document.getElementById('cg').innerHTML = codegen(data);

</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache to_html
Mustache.to_html(template, data);
ready
Handlebars: compile + render
Handlebars.compile(template)(data);
ready
Handlebars: compile once + render
if (!hb_compiled) {
    hb_compiled = Handlebars.compile(template);
}
hb_compiled(data);
ready
Handlebars: render only
hb_compiled(data);
ready
Codegen
codegen(data);
ready

Revisions

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