MeasureThat.net

Run results for: Fastest way to list children: childNodes vs children vs firstChild/nextSibling vs firstElementChild/nextElementSibling v2 fixed

Result: firstElementChild is the fastest yielding 3-4X performance. With lastElementChild close (margin of error) 2nd. Other observations: doing for loop i-- with children shows ~150% higher performance vs i++. And unloading it into a variable prior yields another ~200% boost

Go to the benchmark
Run details:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36
Chrome 95
Linux
Desktop
3 years ago
Test name Executions per second
childNodes foreach 613017.5 Ops/sec
children (direct) 982759.4 Ops/sec
children (into variable) 2547291.8 Ops/sec
children-- (direct) 1533439.4 Ops/sec
children-- (into variable) 3417670.2 Ops/sec
ChildNodes for (direct) 527120.9 Ops/sec
ChildNodes for (into variable) 1795710.9 Ops/sec
ChildNodes for-- (direct) 822558.8 Ops/sec
ChildNodes for-- (into variable) 2287524.2 Ops/sec
firstElementChild nextElementChild 9137618.0 Ops/sec
lastElementChild previousElementChild 9071572.0 Ops/sec
firstChild nextSibling 6856389.0 Ops/sec
lastChild previousSibling 6628145.0 Ops/sec
HTML Preparation code:
​x
 
1
<html>
2
​
3
<body>
4
    <div id='test'>
5
        <div name='a'></div>
6
        <div name='b'></div>
7
        <div name='c'></div>
8
    </div>
9
</body>
10
​
11
</html>
Script Preparation code:
 
var parent = document.getElementById('test');
Tests:

  • childNodes foreach

     
    parent.childNodes.forEach(function (node) {
      let n = node;
    });

  • children (direct)

     
    for (let i = 0; i < parent.children.length; i++) {
      let n = parent.children[i];
    }

  • children (into variable)

     
    let children = parent.children;
    ​
    for (let i = 0; i < children.length; i++) {
      let n = children[i];
    }

  • children-- (direct)

     
    for (let i = parent.children.length-1; i >= 0; i--) {
      let n = parent.children[i];
    }

  • children-- (into variable)

     
    let children = parent.children;
    ​
    for (let i = children.length-1; i >= 0; i--) {
      let n = children[i];
    }

  • ChildNodes for (direct)

     
    for (let i = 0; i < parent.childNodes.length; i++) {
      let n = parent.childNodes[i];
    }

  • ChildNodes for (into variable)

     
    let children = parent.childNodes;
    ​
    for (let i = 0; i < children.length; i++) {
      let n = children[i];
    }

  • ChildNodes for-- (direct)

     
    for (let i = parent.childNodes.length-1; i >= 0; i--) {
      let n = parent.childNodes[i];
    }

  • ChildNodes for-- (into variable)

     
    let children = parent.childNodes;
    ​
    for (let i = children.length-1; i >= 0; i--) {
      let n = children[i];
    }

  • firstElementChild nextElementChild

     
    let elem = parent.firstElementChild;
    do {
      let n = elem;
    } while (elem = elem.nextElementSibling)

  • lastElementChild previousElementChild

     
    let elem = parent.lastElementChild;
    do {
      let n = elem;
    } while (elem = elem.previousElementSibling)

  • firstChild nextSibling

     
    let elem = parent.firstChild;
    do {
      let n = elem;
    } while (elem = elem.nextSibling)

  • lastChild previousSibling

     
    let elem = parent.lastChild;
    do {
      let n = elem;
    } while (elem = elem.previousSibling)