Handlebars.js vs Mustache.js (v26)

Revision 26 of this benchmark created on

Preparation HTML

<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.7.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}}
    {{/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>

Setup

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);

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

Revisions

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