Benchmark: nodes vs attributes vs nodeValue string for WRITE DOM data storage benchmark

nodes vs attributes vs nodeValue string for WRITE DOM data storage benchmark (version: 0)

Result: Using nodes and nodeValue as data storage over attributes can be 2-4X faster for writing if stored as formatted string or using positions. Still 5-10X slower than JS objects.

Comparing performance of: write nodes with 7 child nodes vs write attribute with 7 attributes vs write nodevalue with 7 string attributes vs write nodes with 7 child nodes with children + index vs write nodes with 7 child nodes with nextElementSibling + index vs write nodes with 7 child nodes with children + no index vs write nodes with 7 child nodes with nextElementSibling + no index vs obj with 7 items

Created: 4 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<div style='display: none'>
    <div id='node'>
        <name>cat</name>
        <not>blank</not>
        <not1>blank</not1>
        <not2>blank</not2>
        <not3>blank</not3>
        <not4>blank</not4>
        <type>bat</type>
    </div>
    <div id='attr' name='cat' type='bat' not='blank' not1='blank' not2='blank' not3='blank' not4='blank'></div>
    <div id='node2'><data>[name]cat[not]blank[not1]blank[not2]blank[not3]blank[not4]blank[type]bat[</data></div>
</div>

Script Preparation code:

var node = document.getElementById('node')
var attr = document.getElementById('attr')
var node2 = document.getElementById('node2')
var obj = { name:'cat', not:'blank', not1:'blank', not2:'blank', not3:'blank', not4:'blank', type:'bat' }

var al = {
  name:0,
  not:1,
  not1:2,
  not2:3,
  not3:4,
  not4:5,
  type:6
}

Tests:

write nodes with 7 child nodes
let elem = node.firstElementChild; let n; do { if ( elem.nodeName === 'TYPE' ) { elem.nodeValue='rat'; break; } } while (elem = elem.nextElementSibling)
write attribute with 7 attributes
attr.getAttributeNode('type').value='rat';
write nodevalue with 7 string attributes
let t = node2.firstElementChild.firstChild.nodeValue; let s = t.indexOf('[type]')+6 let e = t.indexOf('[', s) let n = t.substring(0,s) + 'rat' + t.substring(e)
write nodes with 7 child nodes with children + index
node.children[al['type']].nodeValue='rat';
write nodes with 7 child nodes with nextElementSibling + index
let elem = node.firstElementChild; let n; for (let i = 0; i<10; i++) { if ( i === al['type'] ) { elem.nodeValue = 'rat'; break; } elem = elem.nextElementSibling }
write nodes with 7 child nodes with children + no index
node.children[6].nodeValue='rat';
write nodes with 7 child nodes with nextElementSibling + no index
let elem = node.firstElementChild; let n; for (let i = 0; i<10; i++) { if ( i === 6 ) { elem.nodeValue = 'rat'; break; } elem = elem.nextElementSibling }
obj with 7 items
obj['type']='rat';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
write nodes with 7 child nodes
write attribute with 7 attributes
write nodevalue with 7 string attributes
write nodes with 7 child nodes with children + index
write nodes with 7 child nodes with nextElementSibling + index
write nodes with 7 child nodes with children + no index
write nodes with 7 child nodes with nextElementSibling + no index
obj with 7 items

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.

Measuring performance differences between various approaches to store data in DOM elements is crucial, especially when considering different use cases like writing attributes, node values, or using objects.

**Benchmark Definition**

The benchmark tests the execution speed of six different methods for writing data into DOM elements:

1. **Attribute-based approach**: Writing attribute names and values.
2. **Node value-based approach**: Setting `nodeValue` properties directly on the element nodes.
3. **Children-based approach with index**: Modifying the child nodes using their indices.
4. **Children-based approach without index**: Modifying the child nodes without specifying an index.
5. **Object-based approach**: Using objects to store data and assigning them as attributes.

The benchmark results are shown in the provided "Latest benchmark result" section, which lists execution speeds for each test case across multiple browsers and devices.

**Key Takeaways**

1.  **Attribute-based approach**: Generally slower than other methods due to attribute parsing and validation.
2.  **Node value-based approach**: Faster than attribute-based because it avoids parsing and validation overhead.
3.  **Children-based approach with index**: Slower than node value-based, as accessing child nodes by index requires additional DOM traversal.
4.  **Children-based approach without index**: Slightly faster than the children-based approach with an index due to reduced DOM traversal.
5.  **Object-based approach**: Fastest method due to avoiding attribute-related parsing and validation.

**Why Does It Matter?**

Understanding these performance differences is crucial for optimizing your code, especially when dealing with complex data structures or large datasets. Choosing the most efficient approach can significantly impact application performance, user experience, and resource usage.

Best practices like:

*   **Minimize DOM manipulations**: When possible, update attributes directly rather than creating new elements or modifying existing ones.
*   **Use objects for data storage**: Objects provide a more efficient way to store and manage data compared to attribute-based approaches.
*   **Avoid unnecessary DOM traversals**: Use indexes or other optimized methods when accessing child nodes or elements.

**Conclusion**

Measuring performance differences between various DOM data storage approaches can help you optimize your code, improve application performance, and reduce resource usage. By understanding these key takeaways, you'll be better equipped to choose the most efficient method for your specific use case.

Related benchmarks: