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

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

Results: Reading the DOM with nextElementSibling + getAttribute is less than 5% slower than an JS array list

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

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'></div>
        <div class='item' id='b' name='b'></div>
        <div class='item' id='c' name='c'></div>
    </div>
</body>

</html>

​x
 
<html>
​
<body>
    <div id='test'>
        <div class='item' id='a' name='a'></div>
        <div class='item' id='b' name='b'></div>
        <div class='item' id='c' name='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 } );
  }
});

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

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)

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: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 95 on Linux

View result in a separate tab

Test name	Executions per second
fastest iter childelements	1264905.4 Ops/sec
tag name	827169.4 Ops/sec
class name	810626.9 Ops/sec
id	608968.5 Ops/sec
array of node	792838.8 Ops/sec
array item	2102137.2 Ops/sec
fastest iter childelements + getAttribute	2078095.9 Ops/sec

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

Let's break down the benchmark and its components.

Benchmark Overview

The benchmark, named "DOM get attributes of children vs JS Array READ performance", compares the performance of different methods for reading attributes from DOM elements versus JavaScript arrays.

Benchmark Definition JSON

The JSON file defines two main scripts:

Script Preparation Code: This code sets up a test environment by creating a parent element with child elements, and then loops through each child element to create two arrays: store1 containing the child nodes, and store2 containing objects with attribute names.
Html Preparation Code: This HTML code defines the structure of the test page.

Individual Test Cases

The benchmark consists of six individual test cases:

fastest iter childelements: Loops through the child elements using nextElementSibling and accesses an attribute value.
tag name: Uses getElementsByTagName to get a list of child elements with the tag name 'div', then loops through the list to access attribute values.
class name: Similar to the previous one, but uses getElementsByClassName to get a list of child elements with the class name 'item'.
id: Loops through the child elements and accesses attribute values using getElementById.
array of node: Loops through the store1 array containing the child nodes.
array item: Loops through the store2 array containing objects with attribute names.

Library and JavaScript Feature

None of these test cases use specific libraries or advanced JavaScript features like ES6 promises, async/await, or Web Workers.

Performance Comparison

The benchmark measures the performance (in executions per second) of each test case using Chrome 95 on a Linux desktop. The results indicate that reading attribute values from DOM elements is generally faster than accessing them through arrays.

Pros and Cons of Different Approaches

Here are some pros and cons for each approach:

fastest iter childelements: Fast, but may require extra DOM queries.
tag name and class name: May require extra DOM queries or array iteration.
id: Requires multiple DOM queries to access attribute values.
array of node and array item: May require more memory accesses than the other approaches.

Other Alternatives

For comparing performance in JavaScript, you might also consider using benchmarks like:

JSPerf (now deprecated)
BenchmarkJS
js-benchmark

Keep in mind that benchmarking is an art, and results may vary depending on your specific use case and environment.

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its components.

**Benchmark Overview**

The benchmark, named "DOM get attributes of children vs JS Array READ performance", compares the performance of different methods for reading attributes from DOM elements versus JavaScript arrays.

**Benchmark Definition JSON**

The JSON file defines two main scripts:

1. `Script Preparation Code`: This code sets up a test environment by creating a parent element with child elements, and then loops through each child element to create two arrays: `store1` containing the child nodes, and `store2` containing objects with attribute names.
2. `Html Preparation Code`: This HTML code defines the structure of the test page.

**Individual Test Cases**

The benchmark consists of six individual test cases:

1. **fastest iter childelements**: Loops through the child elements using `nextElementSibling` and accesses an attribute value.
2. **tag name**: Uses `getElementsByTagName` to get a list of child elements with the tag name 'div', then loops through the list to access attribute values.
3. **class name**: Similar to the previous one, but uses `getElementsByClassName` to get a list of child elements with the class name 'item'.
4. **id**: Loops through the child elements and accesses attribute values using `getElementById`.
5. **array of node**: Loops through the `store1` array containing the child nodes.
6. **array item**: Loops through the `store2` array containing objects with attribute names.

**Library and JavaScript Feature**

None of these test cases use specific libraries or advanced JavaScript features like ES6 promises, async/await, or Web Workers.

**Performance Comparison**

**Pros and Cons of Different Approaches**

Here are some pros and cons for each approach:

1. **fastest iter childelements**: Fast, but may require extra DOM queries.
2. **tag name** and **class name**: May require extra DOM queries or array iteration.
3. **id**: Requires multiple DOM queries to access attribute values.
4. **array of node** and **array item**: May require more memory accesses than the other approaches.

**Other Alternatives**

For comparing performance in JavaScript, you might also consider using benchmarks like:

* JSPerf (now deprecated)
* BenchmarkJS
* js-benchmark

Keep in mind that benchmarking is an art, and results may vary depending on your specific use case and environment.

Related benchmarks: