Run results for: DOM get attributes of children vs JS Array READ performance v2

Results: Reading the DOM with nextElementSibling + getAttribute is less than 5% slower than an JS array list. textContent is slightly faster than a JS array list, and nodeValue is 3X faster.

Go to the benchmark

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser: Chrome 120

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

fastest iter childelements + nodeValue

8.8M/s

fastest iter childelements + getAttribute

3.9M/s

array item

3.4M/s

fastest iter childelements + textContent

2.9M/s

fastest iter childelements + getAttributeNode

2.7M/s

fastest iter childelements

2.0M/s

tag name

1.5M/s

class name

1.4M/s

array of node

1.4M/s

1.0M/s

View exact numbers

Test name	Executions per second
✓ fastest iter childelements + nodeValue	8,775,474 Ops/sec
fastest iter childelements + getAttribute	3,919,303 Ops/sec
array item	3,351,654 Ops/sec
fastest iter childelements + textContent	2,947,924 Ops/sec
fastest iter childelements + getAttributeNode	2,710,539 Ops/sec
fastest iter childelements	2,003,870 Ops/sec
tag name	1,470,893 Ops/sec
class name	1,418,738 Ops/sec
array of node	1,377,730 Ops/sec
id	1,047,874 Ops/sec

HTML Preparation code:

<html>

<body>
    <div id='test'>
        <div class='item' id='a' name='a'>a</div>
        <div class='item' id='b' name='b'>b</div>
        <div class='item' id='c' name='c'>c</div>
    </div>
</body>

</html>

Script Preparation code:

var parent = document.getElementById('test');

var store1 = [];
var store2 = [];
parent.childNodes.forEach(function (node) {
  if ( node.nodeName !== '#text') {
  store1.push( node );
  store2.push( { name: node.attributes.name.value } );
  }
});

Tests:

fastest iter childelements
let elem = parent.firstElementChild; do { let n = elem.attributes.name.value; } while (elem = elem.nextElementSibling)
tag name
let children = parent.getElementsByTagName('div'); for (let i = 0; i < children.length; i++) { let n = children[i].attributes.name.value; }
class name
let children = parent.getElementsByClassName('item') for (let i = 0; i < children.length; i++) { let n = children[i].attributes.name.value; }
id
let n1 = document.getElementById('a').attributes.name.value; let n2 = document.getElementById('b').attributes.name.value; let n3 = document.getElementById('c').attributes.name.value;
array of node
for (let i = 0; i < store1.length; i++) { let n = store1[i].attributes.name.value; }
array item
for (let i = 0; i < store2.length; i++) { let n = store2[i].name; }
fastest iter childelements + getAttribute
let elem = parent.firstElementChild; do { let n = elem.getAttribute('name'); } while (elem = elem.nextElementSibling)
fastest iter childelements + nodeValue
let elem = parent.firstElementChild; do { let n = elem.nodeValue; } while (elem = elem.nextElementSibling)
fastest iter childelements + textContent
let elem = parent.firstElementChild; do { let n = elem.textContent; } while (elem = elem.nextElementSibling)
fastest iter childelements + getAttributeNode
let elem = parent.firstElementChild; do { let n = elem.getAttributeNode('name').value; } while (elem = elem.nextElementSibling)