sdp-jquery-append

JavaScript performance comparison

Revision 4 of this test case created by techfoobar

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="myDiv">
</div>
<script>
Benchmark.prototype.setup = function() {
    var movies = ['The Shawshank Redemption (1994)', 'The Godfather (1972)', 'The Godfather: Part II (1974)', 'Pulp Fiction (1994)', 'The Good, the Bad and the Ugly (1966)', '12 Angry Men (1957)', 'The Dark Knight (2008)', 'Schindler\'s List (1993)', 'The Lord of the Rings: The Return of the King(2003)', 'Fight Club (1999)', 'Star Wars: Episode V - The Empire Strikes Back(1980)', 'The Lord of the Rings: The Fellowship of the Ring(2001)', 'One Flew Over the Cuckoo\'s Nest (1975)', 'Inception (2010)', 'Goodfellas (1990)', 'Star Wars (1977)', 'Seven Samurai (1954)', 'Forrest Gump (1994)', 'The Matrix (1999)', 'The Lord of the Rings: The Two Towers (2002)', 'City of God (2002)', 'Se7en (1995)', 'The Silence of the Lambs (1991)', 'Once Upon a Time in the West (1968)', 'Casablanca (1942)', 'The Usual Suspects (1995)', 'Raiders of the Lost Ark (1981)', 'Rear Window (1954)', 'It\'s a Wonderful Life (1946)', 'Psycho (1960)']
};
</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
Append
var ul = $("<ul></ul>");
$("#myDiv").empty().append(ul)

$.each(movies, function(count, item) {
  var id = 'li_' + count;
  ul.append('<li id=' + id + '>' + item + '</li>');

  $('#' + id).click(function() {});
});
pending…
AppendTo
var div = $("#myDiv").empty(),
    ul = $("<ul></ul>").appendTo(div);

$.each(movies, function(count, item) {
  $('<li>' + item + '</li>').click(function() {}).appendTo(ul);
});
pending…
Better
var html = [],
    i = 0,
    div = $("#myDiv").empty(),
    ul = $("<ul></ul>").appendTo(div);

$.each(movies, function(count, item) {
  html[i++] = $('<li>' + item + '</li>').click(function() {});
});

ul.append(html);
pending…
Still Better
var html = [],
    i = 0,
    div = $("#myDiv").empty(),
    ul = $("<ul></ul>").appendTo(div),
    f = function() {};

$.each(movies, function(count, item) {
  html[i++] = $('<li>', {text: item}).click(f);
});

ul.append(html);
pending…
Even Better
var html = '',
    i = 0,
    div = $("#myDiv").empty(),
    ul = $("<ul></ul>").appendTo(div),
    f = function() {};

$.each(movies, function(count, item) {
  html += '<li>' + item + '</li>';
});

ul.append(html);
ul.find('li').click(f);
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