Dom Manipulation - Js Templating vs programmatic jQuery

JavaScript performance comparison

Test case created by Thomas Davis

Info

What is faster, generating elements on the fly using jQuery appends and generator or using javascript templates.

Preparation code

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

<!-- The Javascript template - using underscore.js -->
<script type="text/template" id="combo_template">
    <select> 
    <% _.each(values, function(value) { %>
        <option><%= value %></option>
    <% }); %>
    </select >
</script>

<div id="testcontainer" style="display: none;"></div>
<script>
  $("#testcontainer").empty();
  var values = ["SOMETHING", "THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS"];
</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
Javascript Templates
 
var html = $("#combo_template").html();
$("#testcontainer").append(_.template(html, {
  values: values
}));
 pending…
jQuery Append
 
var combo = $("<select/>");
var blah = values.length;
for( var i = 0; i<blah;i++){
  var value = $("<option/>");
value.text(values[i]);
combo.append(value);
}
$("#testcontainer").append(combo);
 pending…
Stringed Dom
 
var HTML = '<select>', blah = values.length;
for( var i = 0; i<blah;i++){
HTML += '<option>' + values[i] + '</option>';
}
HTML += '</select>';
$("#testcontainer").append(HTML);

// Fast but too messy imo
 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:

6 comments

Thomas Davis (revision owner) commented : ∞

lol at IE speeds

Stuart commented : ∞

I just added IE6 (for giggles), Opera, some iPads, iPhones, Camino and the latest Chrome Canary build. In other news... if you need advice on how to party it up on a Friday night just ask away.

Thomas Davis (revision owner) commented : ∞

I need friday night party ideas for a house full of dudes and no chance of women.

Stuart commented : ∞

May I humbly suggest you get everyone a suite of outdated browsers and have them start posting test results on this particular Dom Manipulation? Slowest one wins. Then get everyone a bunch of the latest nightlies, fastest one wins.

Or just go where the women are. I find that does wonders for one's chances.

Thomas Davis (revision owner) commented : ∞

Checkout the revisions for some other cool methods, I really like revision 6

Shawn Crigger commented : ∞

This is a very interesting test suite, I've been researching using Java script templates this week and seeing that they actually work a bit faster then using jQuery's Append is a plus.

Add a comment