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: 3 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>

​x
 
<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)
}

 
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)
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;
}

 
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;
}

 
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;

 
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; }
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;
}

 
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)
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)
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)
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)
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;
}

 
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;
}

 
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; }
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; }
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; }
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

Latest run results:

Run details: (Test run date: 2 years 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.2 Ops/sec
tag name	1477045.5 Ops/sec
class name	1466709.4 Ops/sec
id	1072931.6 Ops/sec
array of node	2026058.9 Ops/sec
array item	200652032.0 Ops/sec
fastest iter childelements + getAttribute	8877777.0 Ops/sec
fastest iter childelements + nodeValue	14239759.0 Ops/sec
fastest iter childelements + textContent	8403773.0 Ops/sec
fastest iter childelements + getAttributeNode	2757558.2 Ops/sec
tag name--	1732371.9 Ops/sec
class name--	1737964.9 Ops/sec
queryselectorall class--	1146137.8 Ops/sec
queryselectorall tag--	1117409.2 Ops/sec
array item--	216271008.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

I'll dive straight into it.

The data appears to be a JSON string containing an array of objects, each representing a test run with various performance metrics for Firefox 110 on Linux desktop devices.

Here's a concise summary:

Browsers: Firefox 110 Platforms: Desktop (Linux) Operating Systems: Linux

Test Names:

fastest iter childelements + textContent
fastest iter childelements + getAttributeNode
array of node
fastest iter childelements
class name--
tag name--
tag name
class name
queryselectorall class--
queryselectorall tag--
id

Execution Metrics:

The values in the "ExecutionsPerSecond" field vary from 1466709.375 to 2757558.25.

This data likely originates from performance benchmarking or testing of Firefox's DOM and event loop capabilities on Linux desktop devices.

LLMs can make mistakes. Check important info.

Related benchmarks: