Run results for: DOM set attributes of children vs JS Array WRITE performance

Run details:

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

Browser: Chrome 95

Operating system: Linux

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
fastest iter childelements + setAttribute	513185.2 Ops/sec
Array item	2043916.4 Ops/sec
fastest iter childelements + attributes	559170.4 Ops/sec
fastest iter childelements + nodeValue	2433263.2 Ops/sec
fastest iter childelements + textContent	1598468.4 Ops/sec
Array object	1988372.6 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 store = [];
parent.childNodes.forEach(function (node) {
  if ( node.nodeName !== '#text') {
  store.push( { name: node.attributes.name.value } );
  }
});

Tests:

fastest iter childelements + setAttribute
let elem = parent.firstElementChild; do { elem.setAttribute('name','d'); } while (elem = elem.nextElementSibling)
Array item
for (let i = 0; i < store.length; i++) { store[i].name = 'd'; }
fastest iter childelements + attributes
let elem = parent.firstElementChild; do { elem.attributes.name.value = 'd'; } while (elem = elem.nextElementSibling)
fastest iter childelements + nodeValue
let elem = parent.firstElementChild; do { elem.nodeValue = 'd'; } while (elem = elem.nextElementSibling)
fastest iter childelements + textContent
let elem = parent.firstElementChild; do { elem.textContent = 'd'; } while (elem = elem.nextElementSibling)
Array object
for (let i = 0; i < store.length; i++) { store[i] = {name:'d'}; }

Run results for: DOM set attributes of children vs JS Array WRITE performance

Result: JS Array is 4X faster than setting DOM attributes, but setting DOM nodeValue is still fastest

fastest iter childelements + setAttribute

Array item

fastest iter childelements + attributes

fastest iter childelements + nodeValue

fastest iter childelements + textContent

Array object