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
Benchmark test for...
<textarea id="mustache">
<table border="1" style="width: 700px;font-size: 15px;text-align: center;border-collapse: collapse;">
<caption>{{title}}</caption>
<thead>
<tr>
<td style="width: 90px;"></td>
{{#table.heads}}
<th>{{.}}</th>
{{/table.heads}}
</tr>
</thead>
<tbody>
{{#table.sections}}
<tr>
<td class="name" style="text-align: left;padding: 4px 0;">{{name}}</td>
{{#section}}
<td class="item" style="text-align: center;padding: 4px 0;">{{.}}</td>
{{/section}}
</tr>
{{/table.sections}}
</tbody>
</table>
</textarea>
<textarea id="underscore">
<table border="1" style="width: 700px;font-size: 15px;text-align: center;border-collapse: collapse;">
<caption><%-title%></caption>
<thead>
<tr>
<td style="width: 90px;"></td>
<%_.each(table.heads,function(head){%>
<th><%-head%></th>
<%})%>
</tr>
</thead>
<tbody>
<%_.each(table.sections,function(s){%>
<tr>
<td class="name" style="text-align: left;padding: 4px 0;"><%-s.name%></td>
<%_.each(s.section,function(section){%>
<td class="item" style="text-align: center;padding: 4px 0;"><%-section%></td>
<%})%>
</tr>
<%})%>
</tbody>
</table>
</textarea>
<div id="pure" style="display: none;">
<table border="1" style="width: 700px;font-size: 15px;text-align: center;border-collapse: collapse;">
<caption></caption>
<thead>
<tr>
<td style="width: 90px;"></td>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="name" style="text-align: left;padding: 4px 0;"></td>
<td class="item" style="text-align: center;padding: 4px 0;"></td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/2.0.0/hogan.js"></script>
<script src="https://rawgithub.com/wycats/handlebars.js/1.0.0/dist/handlebars.runtime.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script src="http://beebole.com/pure/wp-content/themes/BeeBole-pure/libs/pure.js"></script>
</script>
// template data
var templates = {
mustache: $("#mustache").val(),
underscore: $("#underscore").val(),
pure: $p("#template-pure > table"),
directive: {
caption: "title",
"thead th": {
"head <- table.heads": {
".": "head"
}
},
"tbody tr": {
"s <- table.sections": {
"td.name": "s.name",
"td.item": {
"section <- s.section": {
".": "section"
}
}
}
}
}
},
// view data
data = {
title: "JavaScript Template Comparison",
table: {
heads: ["Mustache", "Hogan", "Handlebars", "Underscore", "EJS", "jQuery.EJS", "PURE", "No Template"],
sections: [{
name: "delimiter",
section: ["○", "○", "×", "○", "○", "○", "-", "-"]
}, {
name: "logic-less",
section: ["○", "○", "○", "×", "×", "×", "◎", "◎"]
}, {
name: "precompile",
section: ["×", "○", "○", "×", "○", "×", "×", "×"]
}, {
name: "escape",
section: ["○", "○", "○", "○", "○", "○", "△", "△"]
}, {
name: "method",
section: ["○", "○", "◎", "○", "○", "◎", "○", "○"]
}, {
name: "standalone",
section: ["○", "○", "○", "○", "○", "×", "×", "×"]
}, {
name: "partials",
section: ["○", "○", "○", "×", "△", "×", "×", "×"]
}]
}
};
Ready to run.
Test | Ops/sec | |
---|---|---|
Mustache |
| ready |
Hogan.js |
| ready |
Handlebars.js |
| ready |
Underscore.js |
| ready |
PURE |
| ready |
No Template |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.