Handlebars.js vs Mustache.js

JavaScript performance comparison

Revision 25 of this test case created by Homeslice

Preparation code

<style type="text/css">
  #output { overflow: hidden; } #output .sample { width: 45%; padding: 1%; border:
  1px solid #ccc; float: left; }
</style>
<script src="https://raw.github.com/janl/mustache.js/master/mustache.js">
</script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.0/dist/handlebars.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>
<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);
</script>
    

Preparation code output

<style type="text/css"> #output { overflow: hidden; } #output .sample { width: 45%; padding: 1%; border: 1px solid #ccc; float: left; } </style> <script src="https://raw.github.com/wycats/handlebars.js/1.0.0/dist/handlebars.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> <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); </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 to_html
Mustache.to_html(template, data);
pending…
Handlebars: compile + render
Handlebars.compile(template)(data);
pending…
Handlebars: compile once + render
if (!hb_compiled) {
  hb_compiled = Handlebars.compile(template);
}
hb_compiled(data);
pending…
Handlebars: render only
hb_compiled(data);
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

Mustache Renders

Handlebars Renders