Benchmark: nodes clone vs text replace

HTML Preparation code:

<div id="root"></div>

Script Preparation code:

let gnode = []
// Create the outer div
const outerDiv = document.createElement('div');

// Create the inner div
const innerDiv = outerDiv.cloneNode(true)

// Create the img element
const imgElement = document.createElement('img');
imgElement.src = 'ava.jpg';

// Create the anchor element
const anchorElement = document.createElement('a');
anchorElement.className = 'b8';
anchorElement.href = 'https://seod.gitbook.io/f';
anchorElement.textContent = 'Learn more';

// Append img and anchor to inner div
innerDiv.appendChild(imgElement);
innerDiv.appendChild(anchorElement);

// Create the paragraph element
const paragraph = document.createElement('p');
paragraph.className = 'lD';
paragraph.textContent = 'Using an artificial neural network, ColorFission tries to optimize a color scheme based on an already existing one. This is based upon trying to appeal these colors to the most people. I know the importance of color schemes and combinations in design and branding, but the algorithm itself was outsourced.';

// Append inner div and paragraph to outer div
outerDiv.appendChild(innerDiv);
outerDiv.appendChild(paragraph);

let rn = document.getElementById('root')

// Append the outer div to the body or a specific element
for (let i = 0; i < 100; ++i) {
    let ox = outerDiv.cloneNode(true);
	rn.appendChild(ox);
    //gnode.push(ox);
    gnode[i]=ox;
}

Tests:

lastElementChild
let elem0 = document.getElementById('root').firstElementChild; do { let elem1 = elem0.firstElementChild; let elem1a = elem1.firstElementChild; elem1a.src = 'aubrey.jpg' elem1a = elem1a.nextElementSibling; elem1a.textContent='hello123' elem1 = elem0.lastElementChild; elem1.textContent = 'aubrey' } while (elem0 = elem0.nextElementSibling)
firstElementChild
let elem0 = document.getElementById('root').firstElementChild; do { let elem1 = elem0.firstElementChild; let elem1a = elem1.firstElementChild; elem1a.src = 'aubrey.jpg' elem1a = elem1a.nextElementSibling; elem1a.textContent='hello123' elem1 = elem1.nextElementSibling; elem1.textContent = 'aubrey' } while (elem0 = elem0.nextElementSibling)
dn, then lastelement
let rn = document.getElementById('root') rn.style.display='none' let elem0 = rn.firstElementChild; do { let elem1 = elem0.firstElementChild; let elem1a = elem1.firstElementChild; elem1a.src = 'aubrey.jpg' elem1a = elem1a.nextElementSibling; elem1a.textContent='hello123' elem1 = elem0.lastElementChild; elem1.textContent = 'aubrey' } while (elem0 = elem0.nextElementSibling) rn.style.display='block'
gnode
for (let i = 0; i < 100; ++i) { let elem0 = gnode[i] let elem1 = elem0.firstElementChild; let elem1a = elem1.firstElementChild; elem1a.src = 'aubrey.jpg' elem1a = elem1a.nextElementSibling; elem1a.textContent='hello123' elem1 = elem0.lastElementChild; elem1.textContent = 'aubrey' }
gnode2
rn.style.display='none' for (let i = 0; i < 100; ++i) { let elem0 = gnode[i] let elem1 = elem0.firstElementChild; let elem1a = elem1.firstElementChild; elem1a.src = 'aubrey.jpg' elem1a = elem1a.nextElementSibling; elem1a.textContent='hello123' elem1 = elem0.lastElementChild; elem1.textContent = 'aubrey' } rn.style.display='block'

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lastElementChild
firstElementChild
dn, then lastelement
gnode
gnode2

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
lastElementChild	2680.6 Ops/sec
firstElementChild	2941.8 Ops/sec
dn, then lastelement	3313.4 Ops/sec
gnode	1995.9 Ops/sec
gnode2	2073.4 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 months ago):

LLMs can make mistakes. Check important info.

In the provided benchmark JSON, we are comparing three approaches to updating the text content of elements in the DOM (Document Object Model). Each approach employs different techniques to do so, and the performance of each method is measured in terms of the number of executions per second.

### Benchmark Test Cases

1. **Replace Node Indirectly**
   - **Code**: 
     ```javascript
     let elem0 = document.getElementById('root').firstElementChild;
     do {
       let elem1 = elem0.firstElementChild;
       elem1 = elem1.nextElementSibling;
       elem1.textContent = 'aubrey';
     } while (elem0 = elem0.nextElementSibling);
     ```
   - **Description**: This test starts at the first child of the 'root' div and replaces the text of the second child of each outer element. It performs a traversal of all child nodes but accesses the text node indirectly through sibling navigation.
   - **Pros**: This might be more flexible in certain situations where you're navigating a complex DOM structure and need to update nodes selectively.
   - **Cons**: Indirect traversal can introduce additional overhead due to the repeated lookups, making it potentially slower compared to direct access.

2. **Replace Text Directly**
   - **Code**:
     ```javascript
     let rn = document.getElementById('root');
     for (let i = 0; i < 100; ++i) {
       rn.children[i].children[1].textContent = 'aubrey';
     }
     ```
   - **Description**: This method directly accesses child elements of the 'root' div to replace the text of the second child (assuming that every first child has at least two children). 
   - **Pros**: Directly accessing elements is generally faster as it minimizes the number of DOM lookups and simplifies the traversal process.
   - **Cons**: This approach is less adaptable if the structure of the DOM changes. If children are removed or added, this direct referencing may fail or produce unexpected results.

3. **Last Element**
   - **Code**:
     ```javascript
     let elem0 = document.getElementById('root').firstElementChild;
     do {
       let elem1 = elem0.lastElementChild;
       elem1.textContent = 'aubrey';
     } while (elem0 = elem0.nextElementSibling);
     ```
   - **Description**: This test focuses on accessing and modifying the last child of each outer div element, directly replacing the text content.
   - **Pros**: Similar to the "Replace Text Directly" approach, it benefits from direct element access, which can be efficient and straightforward for operations on the last children.
   - **Cons**: It assumes all elements have last children, which may not always be the case, potentially leading to exceptions or errors if the structure varies.

### Performance Results

The benchmark results indicate the following executions per second for each test:

- **Last Element**: 156,504.125 executions/sec (fastest)
- **Replace Node Indirectly**: 121,518.5625 executions/sec (moderate performance)
- **Replace Text Directly**: 74,828.125 executions/sec (slowest)

### Conclusion

The benchmark effectively compares different methods of updating the DOM, highlighting the trade-offs between flexibility and performance.

**Other Alternatives**:
1. **Virtual DOM Libraries**: Using libraries like React or Vue, which use a virtual DOM to minimize direct manipulations, leading to optimized updates.
2. **Shadow DOM**: This concept tackles encapsulation concerns, allowing styles and scripts to be scoped to a specific subtree of the DOM.
3. **Batching Updates**: Instead of updating the DOM in a loop directly, gathering changes and applying them at once can significantly improve performance.

Choosing the right method for DOM manipulation depends on the specific use case, structure of the DOM, and performance requirements of the application.

Related benchmarks:

nodes clone vs text replace (version: 18)

Comparing performance of: lastElementChild vs firstElementChild vs dn, then lastelement vs gnode vs gnode2

Created: 5 months ago by: Registered User

Jump to the latest result

lastElementChild

firstElementChild

dn, then lastelement

gnode

gnode2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 months ago):