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

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

Result: JS Array is 4X faster than setting DOM attributes, but setting DOM nodeValue is still fastest getAttributeNode().value seems to be fastest way of setting an attribute

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 vs fastest iter childelements + dataset vs fastest iter childelements + getAttributeNode

Created: 3 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<html>

<body>
    <div id='test' style='display: none'>
        <div class='item' id='a' name='a' data-name='a'>a</div>
        <div class='item' id='b' name='b' data-name='b'>b</div>
        <div class='item' id='c' name='c' data-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'}; }
fastest iter childelements + dataset
let elem = parent.firstElementChild; do { elem.dataset.name = 'd'; } while (elem = elem.nextElementSibling)
fastest iter childelements + getAttributeNode
let elem = parent.firstElementChild; do { elem.getAttributeNode('name').value = 'd'; } while (elem = elem.nextElementSibling)

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 iter childelements + dataset
fastest iter childelements + getAttributeNode

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36

Browser/OS: Chrome 94 on Windows

View result in a separate tab

Test name	Executions per second
fastest iter childelements + setAttribute	218228.0 Ops/sec
Array item	878884.4 Ops/sec
fastest iter childelements + attributes	337581.0 Ops/sec
fastest iter childelements + nodeValue	1037791.8 Ops/sec
fastest iter childelements + textContent	488576.0 Ops/sec
Array object	584450.4 Ops/sec
fastest iter childelements + dataset	234569.4 Ops/sec
fastest iter childelements + getAttributeNode	291636.6 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its options, explaining what's tested, pros and cons of each approach, and other considerations.

**Benchmark Purpose:**
MeasureThat.net is testing the performance of different ways to update the attributes of child elements in a DOM tree. The goal is to determine which method is fastest for setting an attribute on a child element.

**Options Compared:**

1. **setAttribute()**: Setting an attribute using the `setAttribute()` method.
2. **Array item assignment**: Assigning a value to each array item.
3. **Array object creation**: Creating a new array object with a single property (name).
4. **nodeValue**: Setting the nodeValue property of a child element.
5. **textContent**: Setting the textContent property of a child element.
6. **getAttributeNode() and setValue()**: Using the `getAttributeNode()` method to get an attribute node, then setting its value using the `setValue()` method.

**Pros and Cons:**

* **setAttribute():**
	+ Pros: Simple, widely supported, and efficient for most use cases.
	+ Cons: Can be slower than other methods for large numbers of elements or complex attributes.
* **Array item assignment**:
	+ Pros: Fast for small arrays, as it's a simple property assignment.
	+ Cons: May be slow for large arrays due to the overhead of creating and assigning properties.
* **Array object creation**:
	+ Pros: Efficient for creating an array with a single property, but may have additional overhead due to object creation.
	+ Cons: Slow if the array is very large or has multiple properties.
* **nodeValue**:
	+ Pros: Fast and efficient for setting the nodeValue of a child element.
	+ Cons: Limited to setting a single value; not suitable for complex attribute updates.
* **textContent**:
	+ Pros: Fast and efficient for setting the textContent of a child element.
	+ Cons: Limited to setting plain text content; not suitable for complex attribute updates.
* **getAttributeNode() and setValue():**
	+ Pros: Can set specific attributes, including complex ones like data- attributes.
	+ Cons: May be slower than other methods due to the additional overhead of getting an attribute node.

**Other Considerations:**

* The benchmark assumes a DOM tree with multiple child elements. If the tree is small or sparse, some options may be faster due to reduced overhead.
* The test doesn't account for edge cases like null or undefined values, which can affect performance in certain scenarios.
* The results may vary depending on the specific browser, version, and system configuration.

In general, the fastest method will depend on the specific use case and requirements. If simplicity and widespread support are essential, `setAttribute()` is likely a good choice. However, if setting specific attributes or working with complex data is necessary, **getAttributeNode() and setValue()` may be a better option.

Related benchmarks:

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

Result: JS Array is 4X faster than setting DOM attributes, but setting DOM nodeValue is still fastest getAttributeNode().value seems to be fastest way of setting an attribute

Created: 3 years ago by: Guest

Jump to the latest result

fastest iter childelements + setAttribute

Array item

fastest iter childelements + attributes

fastest iter childelements + nodeValue

fastest iter childelements + textContent

Array object

fastest iter childelements + dataset

fastest iter childelements + getAttributeNode

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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