Preparation code

<style type="text/css">
  #output { overflow: hidden; } #output .sample { width: 45%; padding: 1%; border:
  1px solid #ccc; float: left; }
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.3.0/mustache.min.js">
</script>
<script src="//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>
<script>
  Benchmark.prototype.setup = function() {
     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

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Mustache.to_html(template, data);

Handlebars.compile(template)(data);

if (!hb_compiled) {
  hb_compiled = Handlebars.compile(template);
}
hb_compiled(data);

hb_compiled(data);

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. Here’s a list of current revisions for this page:

• Revision 1: published by Curtis on 29th July 2011 and last updated on 30th July 2011
• Revision 2: published on 31st July 2011
• Revision 3: published by curtisharvey on 31st July 2011
• Revision 7: published on 11th July 2012
• Revision 8: published by Pradeep Kumar on 17th August 2012
• Revision 11: published on 14th November 2012
• Revision 12: published on 15th November 2012
• Revision 16: published on 25th March 2013
• Revision 17: published on 25th March 2013
• Revision 18: published on 25th March 2013
• Revision 19: published on 8th April 2013

1 comment