Lo-Dash template rendering large dom

JavaScript performance comparison

Revision 6 of this test case created

Preparation code

<script src="//code.jquery.com/jquery-git2.js"></script>
<script src="//rawgithub.com/lodash/lodash/2.4.1/dist/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 = $.length; i < l; i++) { %>
Hex of <%= $[i].colorName %> is <%= $[i].hexValue %>
<% } %>
</script>

<script type="text/template" id="templateForEachNoWithStatement">
<% $.forEach(function (e) { %>
Hex of <%= e.colorName %> is <%= e.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: "$" });
html = compiled(data);
pending…
compile every time
html = "";
_.each(data, function(d) {
  html += _.template(templateSingle, d);
});
pending…
forEach and no with-statement in template
compiled = _.template(templateForEachNoWithStatement, null, { variable: "$" });
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:

0 comments

Add a comment