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

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser: Chrome 131

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

Create copy and loop

2.5M/s

Just loop

1.8M/s

Using childNodes

632K/s

View exact numbers

Test name	Executions per second
✓ Create copy and loop	2,487,128 Ops/sec
Just loop	1,781,715 Ops/sec
Using childNodes	632,149 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++; }