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
A test to show benchmark for popular JS templaters.
<script type="text/html" id="tempo">
<li class="people {{gender}}"><span class="name">{{first_name}}{% if last_name %} {{last_name}}{% if %}</span><span class="age">{{age}}</span></li>
</script>
<script type="text/javascript" src="https://rawgithub.com/jashkenas/underscore/master/underscore.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/aefxx/jQote2/master/jquery.jqote2.js">
</script>
<script type="text/javascript" src="https://rawgithub.com/olado/doT/master/doT.js">
</script>
<script type="text/javascript" src="https://rawgithub.com/BorisMoore/jsrender/master/jsrender.js" ></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.0/handlebars.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/twigkit/tempo/master/tempo.js"></script>
<script type="text/javascript">
window.sharedVariables = [{
first_name: 'Alex',
last_name: null,
age: 24,
gender: 'male'
},
{
first_name: 'Jane',
last_name: 'Painkiller',
age: 26,
gender: 'female'
}];
window.dotTemplate = '{{~it:x}}<li class="people {{=x.gender}}"><span class="name">{{=x.first_name}}{{? x.last_name}} {{=x.last_name}}{{?}}</span><span class="age">{{=x.age}}</span></li>{{~}}';
window.dotCompiled = doT.template(dotTemplate);
window.handlebarsTemplate = '{{#.}}<li class="people {{gender}}"><span class="name">{{first_name}}{{#if last_name}} {{last_name}}{{/if}}</span><span class="age">{{age}}</span></li>{{/.}}';
window.handlebarsCompiled = Handlebars.compile(handlebarsTemplate);
window.jqoteTemplate = '<% for(var i = 0; i < this.length; i++) { %><li class="people <%=this[i].gender%>"><span class="name"><%=this[i].first_name%><% if(this[i].last_name) { %> <%=this[i].last_name%><% } %></span><span class="age"><%=this[i].age%></span></li><% } %>';
window.jqoteCompiled = $.jqotec(jqoteTemplate);
window.jsRenderTemplate = '<li class="people {{:gender}}"><span class="name">{{:first_name}}{{if last_name}} {{:last_name}}{{/if}}</span><span class="age">{{:age}}</span></li>';
window.jsRenderCompiled = $.templates(jsRenderTemplate);
window.tempoTemplate = document.getElementById("tempo");
window.tempoCompiled = Tempo.prepare(tempoTemplate);
window.underscoreTemplate = '<% _.each(data, function(x) { %><li class="people <%=x.gender%>"><span class="name"><%=x.first_name%><% if(x.last_name) { %> <%=x.last_name%><% } %></span><span class="age"><%=x.age%></span></li><% }); %>';
window.underscoreCompiled = _.template(underscoreTemplate);
</script>
Ready to run.
Test | Ops/sec | |
---|---|---|
doT.js |
| ready |
Handlebars.js |
| ready |
jQote2.js |
| ready |
jsRender.js |
| ready |
Tempo.js |
| ready |
Underscore.js |
| ready |
doT.js (precompiled) |
| ready |
Handlebars.js (precompiled) |
| ready |
jQote2.js (precompiled) |
| ready |
jsRender.js (precompiled) |
| ready |
Tempo.js (precompiled) |
| ready |
Underscore.js (precompiled) |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.