Lo-Dash template rendering large dom

JavaScript performance comparison

Revision 4 of this test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.9.2/lodash.min.js">
</script>

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

<script type="text/template" id="templateSingleNoWithStatement">
Hex of <%= data.colorName %> is <%= data.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();
    var templateSingleNoWithStatement = $("#templateSingleNoWithStatement").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
outer for loop no with-statement
html = ""
compiled = _.template(templateSingleNoWithStatement, null, { variable: "data" });
for (var i = 0, l = data.length; i < l; i++) {
  html += compiled(data[i]);
};
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…
compile every time
html = "";
_.each(data, function(d) {
  html += _.template(templateSingle, d);
});
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:

0 comments

Add a comment