Mustache vs Handlebars vs Hogan vs Plus.js (v18)

Revision 18 of this benchmark created on

Description

Set handlebars compiler option to {data: false}.

Preparation HTML

<script id="template_one" type="text/x-handlebars-template">
<h3>{{header}}</h3>
<ul>
    {{#items}}
        {{#first}}<li><strong>{{name}}</strong></li>{{/first}}
    {{/items}}
</ul>
{{#double}}
    <p>Double rainbow!</p>
{{/double}}
</script>
<input plus-template id="plus.first" value="
<li>'+ d.item.name +'</li>
">
<input plus-template id="plus" value="
<h3>'+ d.header +'</h3>
<ul>
'+ p.loopPartial(d.items, 'plus.first') +'
</ul>
'+ p.if(d.double, '<p>Double rainbow!</p>') +'
"/>
<script id="template_two" type="text/x-handlebars-template">
<h1>'+ {{name}}</h1>
<h3>'+ {{age}} years old</h3>
<a href="mailto:{{mail}}"> {{mail}}</a>
Likes:
<ul>
{{#likes}}
<li>{{.}}</li>
{{/likes}}
</ul>
Gear:
<ul>
{{#gear}}
<li>{{name}}</li>
{{/gear}}
</ul></script>

<input plus-template id="loopMe" value="
<h1>'+ d.name +'</h1>
<h3>'+ d.age +' years old</h3>
<a href='+ p.quote('mailto:' + d.mail) +'> '+ d.mail+'</a>
Likes:
<ul>
'+  p.loop(d.likes, '<li>'+ d.item +'</li>') +'  
</ul>
Gear:
<ul>
'+  p.loopPartial(d.gear , 'loopMe.gear.default') +' 
</ul>
">

<input plus-template id="loopMe.gear.default" value="
<li>'+ d.item.name +'</li>
">

<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script src="//builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/hogan.js/2.0.0/hogan.js">
</script>

<script src="//reimertz.github.io/plus.js/dist/plus.min.js"></script>

<script>
var stringTemplate = document.getElementById('template_two').innerHTML;
var stringTemplatePlus = document.getElementById('loopMe');

  var me = {
    age: 27,
    name: 'Bob Hund',
    mail: 'bob@hund.com',
    likes: ['music','programming','beer','music','programming','beer','music','programming','beer','music','programming','beer','music','programming','beer','music','programming','beer','music','programming','beer','music','programming','beer','music','programming','beer','music','programming','beer','music','programming','beer','music','programming','beer','music','programming','beer','music','programming','beer'],
    gear:[{
      name: 'macbook pro retina'
    },{
      name: 'macbook white'
    },{
      name: 'iPad Air'
    },{
      name: 'iPhone 4S'
    }]
  }

var 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
};

var handlebars_precompiledTemplate = Handlebars.compile(stringTemplate, {data: false});
var hogan_precompiledTemplate = Hogan.compile(stringTemplate);
</script>
<div id="output"></div>

Teardown


    document.getElementById('output').innerHTML = templateOutput;

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache
var templateOutput = Mustache.render(stringTemplate, me);
ready
Handlebars
var compiledTemplate = Handlebars.compile(stringTemplate, {data: false});
var templateOutput = compiledTemplate(me);
ready
Handlebars: precompiled
var templateOutput = handlebars_precompiledTemplate(me);
ready
Hogan
var compiledTemplate = Hogan.compile(stringTemplate);
var templateOutput = compiledTemplate.render(me);
ready
Hogan: precompiled
var templateOutput = hogan_precompiledTemplate.render(me);
 
ready
plus.js
var templateOutput = plus.render(stringTemplatePlus, me);
ready

Revisions

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