Benchmark: DOM get attributes of children vs JS Array READ performance v3

DOM get attributes of children vs JS Array READ performance v3 (version: 0)

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. Listing a JS array in a for i-- loop backwards yield ~2X performance

Comparing performance of: fastest iter childelements vs tag name vs class name vs id vs array of node vs array item vs fastest iter childelements + getAttribute vs fastest iter childelements + nodeValue vs fastest iter childelements + textContent vs fastest iter childelements + getAttributeNode vs tag name-- vs class name-- vs queryselectorall class-- vs queryselectorall tag-- vs array item--

Created: 2 years ago by: Guest

Jump to the latest result

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 } );
  }
});

for (let i = store2.length-1; i >= 0; i--) {
  let n = store2[i].name;
  console.log("R",n)
}

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)
tag name--
let children = parent.getElementsByTagName('div'); for (let i = children.length-1; i >= 0; i--) { let n = children[i].attributes.name.value; }
class name--
let children = parent.getElementsByClassName('item') for (let i = children.length-1; i >= 0; i--) { let n = children[i].attributes.name.value; }
queryselectorall class--
let children = parent.querySelectorAll('.item') for (let i = children.length-1; i >= 0; i--) { let n = children[i].attributes.name.value; }
queryselectorall tag--
let children = parent.querySelectorAll('div') for (let i = children.length-1; i >= 0; i--) { let n = children[i].attributes.name.value; }
array item--
for (let i = store2.length-1; i >= 0; i--) { let n = store2[i].name; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
fastest iter childelements
tag name
class name
id
array of node
array item
fastest iter childelements + getAttribute
fastest iter childelements + nodeValue
fastest iter childelements + textContent
fastest iter childelements + getAttributeNode
tag name--
class name--
queryselectorall class--
queryselectorall tag--
array item--

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/110.0

Browser/OS: Firefox 110 on Linux

View result in a separate tab

Test name	Executions per second
fastest iter childelements	1829338.0 Ops/sec
tag name	1477046.0 Ops/sec
class name	1466709.0 Ops/sec
id	1072932.0 Ops/sec
array of node	2026059.0 Ops/sec
array item	200652000.0 Ops/sec
fastest iter childelements + getAttribute	8877777.0 Ops/sec
fastest iter childelements + nodeValue	14239760.0 Ops/sec
fastest iter childelements + textContent	8403773.0 Ops/sec
fastest iter childelements + getAttributeNode	2757558.0 Ops/sec
tag name--	1732372.0 Ops/sec
class name--	1737965.0 Ops/sec
queryselectorall class--	1146138.0 Ops/sec
queryselectorall tag--	1117409.0 Ops/sec
array item--	216271000.0 Ops/sec

DOM get attributes of children vs JS Array READ performance v3 (version: 0)

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. Listing a JS array in a for i-- loop backwards yield ~2X performance

Created: 2 years ago by: Guest

Jump to the latest result

fastest iter childelements

tag name

class name

id

array of node

array item

fastest iter childelements + getAttribute

fastest iter childelements + nodeValue

fastest iter childelements + textContent

fastest iter childelements + getAttributeNode

tag name--

class name--

queryselectorall class--

queryselectorall tag--

array item--

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A