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

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

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)

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

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

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**

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:

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: