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

Underscore.js template rendering large dom

Benchmark created by Ruoyu Sun on November 11, 2012

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js">
</script>

<script type="text/template" id="templateSingle">
Hex of <%= colorName %> is <%= hexValue %>
</script>

<script type="text/template" id="templateEach">
<% _.each(obj, function(o) { %>
Hex of <%= o.colorName %> is <%= o.hexValue %>
<% }); %>
</script>

<script type="text/template" id="templateForLoop">
<% for (var i = 0, l = obj.length; i < l; i++) { %>
Hex of <%= obj[i].colorName %> is <%= obj[i].hexValue %>
<% } %>
</script>

<script type="text/template" id="templateEachNoWithStatement">
<% _.each(data, function(d) { %>
Hex of <%= d.colorName %> is <%= d.hexValue %>
<% }); %>
</script>

<script type="text/template" id="templateForLoopNoWithStatement">
<% for (var i = 0, l = data.length; i < l; i++) { %>
Hex of <%= data[i].colorName %> is <%= data[i].hexValue %>
<% } %>
</script>

<script>
var data = [{
        "colorName":"red",
        "hexValue":"#f00"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"yellow",
        "hexValue":"#ff0"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"yellow",
        "hexValue":"#ff0"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"yellow",
        "hexValue":"#ff0"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"yellow",
        "hexValue":"#ff0"
},
{
        "colorName":"green",
        "hexValue":"#0f0"
},
{
        "colorName":"blue",
        "hexValue":"#00f"
},
{
        "colorName":"cyan",
        "hexValue":"#0ff"
},
{
        "colorName":"magenta",
        "hexValue":"#f0f"
},
{
        "colorName":"yellow",
        "hexValue":"#ff0"
},
{
        "colorName":"black",
        "hexValue":"#000"
}
];
</script>

Setup

var compiled;
    var html = "";
    
    var _ = window._;
    var data = window.data;
    
    var templateSingle = $("#templateSingle").html();
    var templateEach = $("#templateEach").html();
    var templateForLoop = $("#templateForLoop").html();
    var templateEachNoWithStatement = $("#templateEachNoWithStatement").html();
    var templateForLoopNoWithStatement = $("#templateForLoopNoWithStatement").html();

Test runner

Ready to run.

Testing in
Test		Ops/sec
compile every time	`html = ""; _.each(data, function(d) { html += _.template(templateSingle, d); });`	ready
pre-complied template with _.each	`html = ""; compiled = _.template(templateSingle); _.each(data, function(d) { html += compiled(d); });`	ready
pre-complied template with for-loop	`html = ""; compiled = _.template(templateSingle); for (var i = 0, l = data.length; i < l; i++) { html += compiled(data[i]); };`	ready
_.each in template	`compiled = _.template(templateEach); html = compiled(data);`	ready
for-loop in template	`compiled = _.template(templateForLoop); html = compiled(data);`	ready
_.each and no with-statement in template	`compiled = _.template(templateEachNoWithStatement, null, { variable: "data" }); html = compiled(data);`	ready
for-loop and no with-statement in template	`compiled = _.template(templateForLoopNoWithStatement, null, { variable: "data" }); html = compiled(data);`	ready

Revisions

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

Revision 1: published by Ruoyu Sun on November 11, 2012
Revision 2: published on November 13, 2012
Revision 3: published on January 16, 2013
Revision 4: published on October 27, 2013
Revision 5: published by Heavensrevenge on December 25, 2013
Revision 6: published on June 13, 2014