jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
Compared Mustache.js, Handlebars.js, Hogan.js, templayed.js and doT.js.
<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://raw.github.com/twitter/hogan.js/master/lib/template.js"></script>
<script src="https://raw.github.com/twitter/hogan.js/master/lib/compiler.js"></script>
<script src="https://raw.github.com/archan937/templayed.js/master/src/templayed.js"></script>
<script src="https://github.com/olado/doT/raw/master/doT.js"></script>
var tests = [{
template: "<p>My name is {{name}}!</p>",
variables: {
name: "Paul Engel"
}
}, {
template: "<p>My name is {{name}}!{{!name}}</p>",
variables: {
name: "Paul Engel"
}
}, {
template: "<p>{{html}} {{&html}}</p>",
variables: {
html: "<strong>Paul Engel</strong>"
}
}, {
template: "<p>{{html}} {{{html}}}</p>",
variables: {
html: "<strong>Paul Engel</strong>"
}
}, {
template: "<p>This is shown!{{#show}} Psst, this is never shown{{/show}}</p>",
variables: {}
}, {
template: "<p>This is shown!{{#show}} Psst, this is never shown{{/show}}</p>",
variables: {
show: false
}
}, {
template: "<p>This is shown!{{#shown}} And, this is also shown{{/shown}}</p>",
variables: {
shown: true
}
}, {
template: "<p>My name is {{person.first_name}} {{person.last_name}}!</p>",
variables: {
person: {
first_name: "Paul",
last_name: "Engel"
}
}
}, {
template: "{{name}}<ul>{{#names}}<li>{{name}}</li>{{/names}}</ul>{{^names}}Sorry, no people to list!{{/names}}",
variables: {
names: []
}
}, {
template: "<p>{{name}}</p><ul>{{#names}}<li>{{name}}</li>{{/names}}</ul>{{^names}}Sorry, no people to list!{{/names}}<p>{{name}}</p>",
variables: {
name: "Chunk Norris",
names: [{
name: "Paul"
}, {
name: "Engel"
}]
}
}, {
template: "<ul>{{#names}}<li>{{.}}{{foo}}</li>{{/names}}</ul>",
variables: {
names: ["Paul", "Engel"]
}
}, {
template: "<ul>{{#names}}<li>{{fullName}}</li>{{/names}}</ul>",
variables: {
names: [{
firstName: "Paul",
lastName: "Engel"
}, {
firstName: "Chunk",
lastName: "Norris"
}],
fullName: function() {
return this.lastName + ", " + this.firstName;
}
}
}];
var compiled = {
"Mustache.js": [],
"Handlebars.js": [],
"Hogan.js": [],
"templayed.js": [],
"doT.js": []
};
for (var i = 0; i < tests.length; i++) {
var template = tests[i].template;
compiled["Mustache.js" ].push(template.replace(/\.\.\//g, ""));
compiled["Handlebars.js"].push(Handlebars.compile(template));
compiled["Hogan.js" ].push(Hogan.compile(template.replace(/\.\.\//g, "")));
compiled["templayed.js" ].push(templayed(template));
compiled["doT.js" ].push(doT.template(template));
}
var _ = window.lodash;
var template = '<div class="item <%= id %>">' + ' <h1><%= title %></h1>' + ' <p><%= desc %></p>' + ' <ul class="attributes">' + ' <li><%= attrs.dimensions %></li>' + ' <li><%= attrs.weight %></li>' + ' <li><%= attrs.price %></li>' + ' </ul>' + '</div>';
var templateFuncPrecompiled = eval("(" + _.template(template).source + ")");
var data = {
id: 5,
title: 'Hello World!',
desc: 'Ordianry item',
attrs: {
dimensions: '100cm x 100cm x 20cm',
weight: '15kg',
price: '10EUR'
}
};
Ready to run.
Test | Ops/sec | |
---|---|---|
Mustache.js |
| ready |
Handlebars.js |
| ready |
Hogan.js |
| ready |
templayed.js |
| ready |
doT.js |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.