Template Engines Performance Benchmark (v1016)

Revision 1016 of this benchmark created on

Preparation HTML

<!-- Libraries -->
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://twitter.github.io/hogan.js/builds/3.0.1/hogan-3.0.1.js"></script>
<script src="http://mustache.github.com/extras/mustache.js"></script>
<script type="text/javascript" src="http://olado.github.io/doT/doT.min.js"></script>
<script src="http://pure.github.io/pure/libs/pure.js"></script>
<script src="http://acrodrig.github.io/bind/lib/bind.js"></script>

<!-- Templates -->
<div id="template">
  <h1 class="header"></h1>
    <h2 class="header2"></h2>
    <h3 class="header3"></h3>
    <h4 class="header4"></h4><h5 class="header5"></h5>
    <h6 class="header6"></h6>
    <ul class="list">
        <li class="item"></li>
    </ul>
</div>
<div id="template" style="display:none"></div>

<!-- Setup -->
<script>
window.sharedVariables = {
    header: "Header",
    header2: "Header2",
    header3: "Header3",
    header4: "Header4",
    header5: "Header5",
    header6: "Header6",
    list: ["1000000000", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
};

window.sharedVariablesPure = {
    header: "Header",
    header2: "Header2",
    header3: "Header3",
    header4: "Header4",
    header5: "Header5",
    header6: "Header6",
    list: [{item:'1000000000'}, {item:'2'}, {item:'3'},{item: '4'},{item: '5'}, {item:'6'}, {item:'7'}, {item:'8'}, {item:'9'}, {item:'10'}]
};

window.handlebarsTemplate = Handlebars.compile("<div><h1 class='header'>{{header}}</h1><h2 class='header2'>{{header2}}</h2><h3 class='header3'>{{header3}}</h3><h4 class='header4'>{{header4}}</h4><h5 class='header5'>{{header5}}</h5><h6 class='header6'>{{header6}}</h6><ul class='list'>{{#each list}}<li class='item'>{{this}}</li>{{/each}}</ul></div>");

window.underscoreTemplate = _.template("<div><h1 class='header'><%= header %></h1><h2 class='header2'><%= header2 %></h2><h3 class='header3'><%= header3 %></h3><h4 class='header4'><%= header4 %></h4><h5 class='header5'><%= header5 %></h5><h6 class='header6'><%= header6 %></h6><ul class='list'><% for (var i = 0, l = list.length; i < l; i++) { %><li class='item'><%= list[i] %></li><% } %></ul></div>");

window.underscoreTemplateNoWith = _.template("<div><h1 class='header'><%= data.header %></h1><h2 class='header2'><%= data.header2 %></h2><h3 class='header3'><%= data.header3 %></h3><h4 class='header4'><%= data.header4 %></h4><h5 class='header5'><%= data.header5 %></h5><h6 class='header6'><%= data.header6 %></h6><ul class='list'><% for (var i = 0, l = data.list.length; i < l; i++) { %><li class='item'><%= data.list[i] %></li><% } %></ul></div>", null, {variable: 'data'});

window.hoganTemplate = Hogan.compile("<div><h1 class='header'>{{{header}}}</h1><h2 class='header2'>{{{header2}}}</h2><h3 class='header3'>{{{header3}}}</h3><h4 class='header4'>{{{header4}}}</h4><h5 class='header5'>{{{header5}}}</h5><h6 class='header6'>{{{header6}}}</h6><ul class='list'>{{#list}}<li class='item'>{{{.}}}</li>{{/list}}</ul></div>");

window.mustacheTemplate = "<div><h1 class='header'>{{{header}}}</h1><h2 class='header2'>{{{header2}}}</h2><h3 class='header3'>{{{header3}}}</h3><h4 class='header4'>{{{header4}}}</h4><h5 class='header5'>{{{header5}}}</h5><h6 class='header6'>{{{header6}}}</h6><ul class='list'>{{#list}}<li class='item'>{{{.}}}</li>{{/list}}</ul></div>";

window.doTtemplate = doT.template("<div><h1 class='header'>{{=it.header}}</h1><h2 class='header2'>{{=it.header2}}</h2><h3 class='header3'>{{=it.header3}}</h3><h4 class='header4'>{{=it.header4}}</h4><h5 class='header5'>{{=it.header5}}</h5><h6 class='header6'>{{=it.header6}}</h6><ul class='list'>{{for(var i = 0,l=it.list.length;i<l;i++) { }}<li class='item'>{{=it.list[i]}}</li>{{ } }}</ul></div>");

window.purejsTemplate = $p("#template").compile({
    ".header":"header",
    ".header2":"header2",
    ".header3":"header3",
    ".header4":"header4",
    ".header5":"header5",
    ".header6":"header6",
    "li":{
        "listItem<-list":{
            ".":"listItem.item"
        }
    }
});

var tmpl = document.getElementById("template");
window.bindjsTemplate = function(model) {
    var mapper = function(m) {
        return {
            h1: model.header,
            h2: model.header2,
            h3: model.header3,
            h4: model.header4,
            h5: model.header5,
            h6: model.header6,
            "ul li.item": model.list
        };
    };
    bind(tmpl, model, mapper);
};
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Handlebars.js
handlebarsTemplate(sharedVariables);
ready
Underscore.js Template
underscoreTemplateNoWith(sharedVariables);
ready
Bind.js
bindjsTemplate(sharedVariables);
ready

Revisions

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