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: 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 store = [];
parent.childNodes.forEach(function (node) {
  if ( node.nodeName !== '#text') {
  store.push( { name: node.attributes.name.value } );
  }
});

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

 
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)
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)
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)
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'}; }
for (let i = 0; i < store.length; i++) {
store[i] = {name:'d'};
}

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

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 + setAttribute	513185.2 Ops/sec
Array item	2043916.4 Ops/sec
fastest iter childelements + attributes	559170.4 Ops/sec
fastest iter childelements + nodeValue	2433263.2 Ops/sec
fastest iter childelements + textContent	1598468.4 Ops/sec
Array object	1988372.6 Ops/sec

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

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:

Setting DOM nodeValue: This approach involves setting the nodeValue property of a DOM element directly, without creating a separate attribute object.
Fastest iter childelements + setAttribute: This approach involves using the setAttribute method to set an attribute on a DOM element's attributes collection.
Array item: This approach involves iterating over an array and setting each element's name property.
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:

Setting DOM nodeValue:
- Pros: Simple, efficient, and fast.
- Cons: Only applicable when setting text content on elements without attributes.
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.
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.
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:

Arrow functions: Used in parent.childNodes.forEach and store[i].name = 'd'.
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:

Using the DOMStringFactory API: Some modern browsers provide a DOMStringFactory class that can help optimize attribute creation and modification.
Utilizing Web Workers: If the benchmark is running in a multithreaded environment, using Web Workers to execute parallel iterations or updates could improve performance.
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.

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: