Complex element creation : jquery vs dom methods

JavaScript performance comparison

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…

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