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

Result: JS Array is 4X faster than setting DOM attributes, but setting DOM nodeValue is still fastest getAttributeNode().value seems to be fastest way of setting an attribute

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36

Browser: Chrome 94

Operating system: Windows

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
fastest iter childelements + setAttribute	218228.0 Ops/sec
Array item	878884.4 Ops/sec
fastest iter childelements + attributes	337581.0 Ops/sec
fastest iter childelements + nodeValue	1037791.8 Ops/sec
fastest iter childelements + textContent	488576.0 Ops/sec
Array object	584450.4 Ops/sec
fastest iter childelements + dataset	234569.4 Ops/sec
fastest iter childelements + getAttributeNode	291636.6 Ops/sec

HTML Preparation code:

<html>

<body>
    <div id='test' style='display: none'>
        <div class='item' id='a' name='a' data-name='a'>a</div>
        <div class='item' id='b' name='b' data-name='b'>b</div>
        <div class='item' id='c' name='c' data-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'}; }
fastest iter childelements + dataset
let elem = parent.firstElementChild; do { elem.dataset.name = 'd'; } while (elem = elem.nextElementSibling)
fastest iter childelements + getAttributeNode
let elem = parent.firstElementChild; do { elem.getAttributeNode('name').value = 'd'; } while (elem = elem.nextElementSibling)

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

Result: JS Array is 4X faster than setting DOM attributes, but setting DOM nodeValue is still fastest getAttributeNode().value seems to be fastest way of setting an attribute

fastest iter childelements + setAttribute

Array item

fastest iter childelements + attributes

fastest iter childelements + nodeValue

fastest iter childelements + textContent

Array object

fastest iter childelements + dataset

fastest iter childelements + getAttributeNode