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

Go to the benchmark

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	548454.3 Ops/sec
Array item	2117794.8 Ops/sec
fastest iter childelements + attributes	596638.1 Ops/sec
fastest iter childelements + nodeValue	2429741.5 Ops/sec
fastest iter childelements + textContent	1606824.2 Ops/sec
Array object	2017685.8 Ops/sec
fastest iter childelements + dataset	521969.2 Ops/sec
fastest iter childelements + getAttributeNode	692651.0 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