Run results for: Loop through child nodes multiple times - v2

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:133.0) Gecko/20100101 Firefox/133.0

Browser: Firefox 133

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

Create copy and loop

3.9M/s

Just loop

3.3M/s

Using childNodes

1.7M/s

View exact numbers

Test name	Executions per second
✓ Create copy and loop	3,922,914 Ops/sec
Just loop	3,255,000 Ops/sec
Using childNodes	1,749,995 Ops/sec

HTML Preparation code:

<ul id="list">
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
  <li>08</li>
  <li>09</li>
  <li>10</li>
</ul>

Script Preparation code:

var list=document.querySelector('#list');
function createCopy(el) {
  var l = [];
  for (var node = list.firstChild; node; node = node.nextSibling) {
    l.push(node);
  }
  return l;
}

Tests:

Just loop
var node, count = 0; for (node = list.firstChild; node; node = node.nextSibling) { count++; } for (node = list.firstChild; node; node = node.nextSibling) { count++; }
Create copy and loop
var node, count = 0, l = createCopy(list), i; for (i = 0; i < l.length; i++) { node = l[i]; count++; } for (i = 0; i < l.length; i++) { node = l[i]; count++; }
Using childNodes
var node, childNodes = list.childNodes, count = 0, i, len = childNodes.length; for (i = 0; i < len; i++) { node = childNodes[i]; count++; } for (i = 0; i < len; i++) { node = childNodes[i]; count++; }