Complex element creation : jquery vs dom methods

JavaScript performance comparison

Revision 5 of this test case created

Preparation code

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

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
HTML string into jQuery
var parentElement = $('<div id="A" class="a">' + '<div id="B" class="b">' + '<ul id="C" class="c">' + '<li class="d"><a href="#"><img class="img" src="/foo.png"></a></li>' + '<li class="d"><a href="#"><img class="img" src="/foo.png"></a></li>' + '<li class="d"><a href="#"><img class="img" src="/foo.png"></a></li>' + '<li class="d"><a href="#"><img class="img" src="/foo.png"></a></li>' + '<li class="d"><a href="#"><img class="img" src="/foo.png"></a></li>' + '</ul>' + '</div>' + '</div>');
pending…
Manual element creation
var parentDiv = document.createElement('div');
parentDiv.id = 'A';
parentDiv.className = 'a';
var innerDiv = document.createElement('div');
innerDiv.id = 'B';
innerDiv.className = 'b';
var ul = document.createElement('ul');
ul.id = 'C';
ul.className = 'c';
for (var i = 0; i < 5; i++) {
  var li = document.createElement('li');
  li.className = 'd';
  var a = document.createElement('a');
  a.href = '#';
  var img = document.createElement('img');
  img.className = 'img';
  img.src = '/foo.png';
  a.appendChild(img);
  li.appendChild(a);
  ul.appendChild(li);
}
innerDiv.appendChild(ul);
parentDiv.appendChild(innerDiv);
pending…
m2
var d = document,
    parentDiv = d.createElement('div'),
    innerDiv = parentDiv.cloneNode(false),
    ul = d.createElement('ul'),
    li = d.createElement('li'),
    a = d.createElement('a'),
    img = d.createElement('img'),
    frag = d.createDocumentFragment(),
    i = 5;
parentDiv.id = 'A';
parentDiv.className = 'a';
innerDiv.id = 'B';
innerDiv.className = 'b';
ul.id = 'C';
ul.className = 'c';
li.className = 'd';
a.href = '#';
img.className = 'img';
img.src = '/foo.png';
a.appendChild(img);
li.appendChild(a);
while (i--) {
  frag.appendChild(li.cloneNode(true))
};
ul.appendChild(frag);
innerDiv.appendChild(ul);
parentDiv.appendChild(innerDiv);
pending…
array join
document.createElement('div').innerHTML = '<div id="A" class="a"><div id="B" class="b"><ul id="C" class="c">' + new Array(5).join('<li class="d"><a href="#"><img class="img" src="/foo.png"></a></li>') + '</ul></div></div>'
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