handlebars vs doT (v8)

Revision 8 of this benchmark created on

Description

handlebars vs doT

Preparation HTML

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/mithril/0.1.24/mithril.min.js"></script>
<script type="text/javascript" src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script type="text/javascript" src="https://rawgithub.com/olado/doT/master/doT.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/lodash/lodash/master/dist/lodash.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
mithril
var tmpl = function(ctrl){
        return m("div",{id:ctrl.id}, [m("ul", ctrl.datas.map(function(data) {
                return [m("li",{class:"test-"+data.id},data)]
        }))])
}

var datas = [];
for (var i = 0; i < 3000; i++) {
        datas.push(Math.random() * 100 | 0);
}

html = tmpl({
        "id": "unko",
        "datas": datas
});
ready
Handlebars
var tmpl = Handlebars.compile('<div id="{{id}}"><ul>{{#each datas}}<li class="test-{{id}}">{{this}}</li>{{/each}}</ul></div>');

var datas = [];
for (var i = 0; i < 3000; i++) {
  datas.push(Math.random() * 100 | 0);
}

html = tmpl({
  "id": "unko",
  "datas": datas
});
 
ready
lodash
var tmpl = _.template('<div id="<%= id %>"><ul><% _.forEach(datas, function(value){ %><li class="test-<%= id %>"><%- value %></li><% }); %> </ul></div>');

var datas = [];
for (var i = 0; i < 3000; i++) {
  datas.push(Math.random() * 100 | 0);
}

html = tmpl({
  "id": "unko",
  "datas": datas
});
 
ready
doT
var tmpl = doT.template('<div id="{{=it.id}}"><ul>{{~it.datas :value:index}}<li class="test-{{=it.id}}">{{=value}}</li>{{~}}</ul></div>');

var datas = [];
for (var i = 0; i < 3000; i++) {
  datas.push(Math.random() * 100 | 0);
}

var html2 = tmpl({
  "id": "unko",
  "datas": datas
});
 
ready

Revisions

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