Benchmark: DOM set attributes of children vs JS Array WRITE performance

DOM set attributes of children vs JS Array WRITE performance (version: 0)

Result: JS Array is 4X faster than setting DOM attributes, but setting DOM nodeValue is still fastest

Comparing performance of: fastest iter childelements + setAttribute vs Array item vs fastest iter childelements + attributes vs fastest iter childelements + nodeValue vs fastest iter childelements + textContent vs Array object

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
fastest iter childelements + setAttribute
Array item
fastest iter childelements + attributes
fastest iter childelements + nodeValue
fastest iter childelements + textContent
Array object

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 dive into the benchmark.

**Benchmark Description**
The benchmark measures the performance of different approaches to setting attributes on DOM elements and arrays.

There are four main approaches being compared:

1. **Setting DOM nodeValue**: This approach involves setting the `nodeValue` property of a DOM element directly, without creating a separate attribute object.
2. **Fastest iter childelements + setAttribute**: This approach involves using the `setAttribute` method to set an attribute on a DOM element's attributes collection.
3. **Array item**: This approach involves iterating over an array and setting each element's `name` property.
4. **Array object**: This approach involves creating a new object for each iteration and assigning it to the corresponding index in the array.

**Pros and Cons of each approach:**

1. **Setting DOM nodeValue**:
	* Pros: Simple, efficient, and fast.
	* Cons: Only applicable when setting text content on elements without attributes.
2. **Fastest iter childelements + setAttribute**:
	* Pros: Allows for efficient attribute updates without creating a new object or modifying the element's text content.
	* Cons: Requires an additional iteration over the DOM's child nodes, which can be slower than direct attribute setting.
3. **Array item**:
	* Pros: Easy to implement and suitable for scenarios where array-like behavior is needed.
	* Cons: Creates a new object on each iteration, which can lead to performance issues with large arrays or frequent updates.
4. **Array object**:
	* Pros: Similar to the `Array item` approach but creates an immutable object that cannot be modified directly.
	* Cons: May require additional memory allocation and garbage collection, potentially leading to slower performance.

**Library usage**
None of the provided benchmark definitions rely on external libraries.

**Special JS features or syntax**
The benchmark utilizes modern JavaScript features such as:

1. **Arrow functions**: Used in `parent.childNodes.forEach` and `store[i].name = 'd'`.
2. **Template literals**: Not explicitly used, but template literals can be used to create string-like values, which is useful for string concatenation.

**Alternative approaches**
Other possible approaches to setting attributes on DOM elements or arrays could include:

1. **Using the `DOMStringFactory` API**: Some modern browsers provide a `DOMStringFactory` class that can help optimize attribute creation and modification.
2. **Utilizing Web Workers**: If the benchmark is running in a multithreaded environment, using Web Workers to execute parallel iterations or updates could improve performance.
3. **Employing optimized DOM manipulation libraries**: Libraries like React or Vue.js often provide optimized DOM manipulation features that can significantly reduce the overhead of updating attributes and children.

Keep in mind that these alternative approaches may have varying degrees of compatibility across different browsers and versions, so it's essential to test their performance in your specific use case.

Related benchmarks: