Info

Test the relative performance of iterating through child nodes using nextSibling vs iterating through the childNodes array.

Preparation code

<div id="container">
<p>Child</p>
<p>Child</p>
<p>Child</p>
<p>Child</p>
<p>Child</p>
<p>Child</p>
<p>Child</p>
<p>Child</p>
<p>Child</p>
<p>Child</p>
</div>
<script>
  var container = document.getElementById('container');
  
  function process(element) {}
</script>

Preparation code output

Test runner

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

Java applet disabled.

var len = container.childNodes.length,
    i;
for (i = 0; i < len; i++) {
 process(container.childNodes[i]);
}

var nodes = container.childNodes,
    len = nodes.length,
    i;
for (i = 0; i < len; i++) {
 process(nodes[i]);
}

var node = container.firstChild;
while (node) {
 process(node);
 node = node.nextSibling;
}

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:

• Revision 1: published by Adrian Sutton on 10th October 2010
• Revision 2: published on 12th November 2011
• Revision 3: published on 12th November 2011
• Revision 4: published by TimTucker on 7th February 2012
• Revision 5: published by Nick on 19th March 2012
• Revision 7: published on 18th February 2013
• Revision 8: published by Sam3000 on 28th February 2013
• Revision 9: published by Sam3000 on 28th February 2013
• Revision 10: published on 28th February 2013
• Revision 11: published on 20th March 2013
• Revision 12: published on 10th April 2013
• Revision 13: published on 23rd April 2013

0 comments