doT.js vs Hogan.js 3.0 vs Handlebars 3.0 vs JsRender (v2)

Revision 2 of this benchmark created by oflow on March 24, 2015

Preparation HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/olado/doT/master/doT.js"></script>
<script type="text/javascript" src="https://rawgit.com/twitter/hogan.js/master/web/builds/3.0.2/hogan-3.0.2.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/BorisMoore/jsrender/master/jsrender.min.js"></script>

<script type="text/template" id="hogan">
<h1>{{title}}</h1>
<p>{{description}}</p>
<ul>{{#entries}}<li><a href="{{{url}}}">{{name}}</a><span>{{{tag}}}</span></li>{{/entries}}</ul>
</script>
<script type="text/template" id="dot">
<h1>{{!it.title}}</h1>
<p>{{!it.description}}</p>
<ul>{{~it.entries :item:i}}<li><a href="{{=item.url}}">{{!item.name}}</a><span>{{=item.tag}}</span></li>{{~}}</ul>
</script>
<script type="text/template" id="handlebars">
<h1>{{title}}</h1>
<p>{{description}}</p>
<ul>{{#each entries}}<li><a href="{{{url}}}">{{name}}</a><span>{{{tag}}}</span></li>{{/each}}</ul>
</script>
<script type="text/x-jsrender" id="jsrender">
<h1>{{>title}}</h1>
<p>{{>description}}</p>
<ul>{{for entries}}<li><a href="{{:url}}">{{>name}}</a><span>{{:tag}}</span></li>{{/for}}</ul>
</script>
<div id="content"></div>

Setup

var data = {
        title: 'Hogan.js vs doT.js vs Handlebars.js',
        description: '',
        entries: []
    }
    var entry = {
        url: 'http://example.com/',
        name: 'name',
        tag: '<b>tag</b>'
    };
    for (var i = 0; i < 10; i++) {
        data['entries'].push({
            url: entry['url']+i,
            name: entry['name']+i,
            tag: entry['tag']+i
        });
    }
    
    var content = $('#content'),
        tmpl_dot = doT.template($('#dot').text()),
        tmpl_hogan = Hogan.compile($('#hogan').text()),
        tmpl_handlebars = Handlebars.compile($('#handlebars').text());
    
    $.templates({tmpl_jsrender: $('#jsrender').text()});

Test runner

content.html(tmpl_dot(data));

content.html(tmpl_hogan.render(data));

content.html(tmpl_handlebars(data));

content.html($.render.tmpl_jsrender(data));

Revisions

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

• Revision 2: published by oflow on March 24, 2015