Underscore.js template rendering large dom

JavaScript performance comparison

Test case created by Ruoyu Sun on 11th November 2012 and last updated on 14th November 2012
Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="//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>
<script>
  Benchmark.prototype.setup = function() {
    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();
  };
</script>
Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)
Java applet disabled.
Testing in unknown unknown
Test		Ops/sec
compile every time	`html = ""; _.each(data, function(d) { html += _.template(templateSingle, d); });`	pending…
pre-complied template with `_.each`	`html = ""; compiled = _.template(templateSingle); _.each(data, function(d) { html += compiled(d); });`	pending…
pre-complied template with for-loop	`html = ""; compiled = _.template(templateSingle); for (var i = 0, l = data.length; i < l; i++) { html += compiled(data[i]); };`	pending…
`_.each` in template	`compiled = _.template(templateEach); html = compiled(data);`	pending…
for-loop in template	`compiled = _.template(templateForLoop); html = compiled(data);`	pending…
`_.each` and no with-statement in template	`compiled = _.template(templateEachNoWithStatement, null, { variable: "data" }); html = compiled(data);`	pending…
for-loop and no with-statement in template	`compiled = _.template(templateForLoopNoWithStatement, null, { variable: "data" }); html = compiled(data);`	pending…
Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:
Revision 1: published by Ruoyu Sun on 11th November 2012 and last updated on 14th November 2012
Revision 2: published on 14th November 2012
Revision 3: published on 16th January 2013