Benchmark: cloneNode(true) vs innerHMTL - w/ Dom Destroy and Replace

HTML Preparation code:

<html>
  <body>
    <div id="container">
    </div>
    <body>
  <html>

Script Preparation code:

var str = `<div>${Math.random().toString().slice(2)}</div>`;
var container = document.getElementById("container");
var temp = document.createElement('template')
var res = '';
for(i=0; i<30000; i++){
	res += str
}
temp.innerHTML = res;

var div = document.createElement('div')
container.appendChild(div);
div.innerHTML = res;

Tests:

cloneNode(true) - While -> Remove
while (div.firstChild) { div.removeChild(div.firstChild); } div.append(temp.content.cloneNode(true));
innerHTML
div.innerHTML = res;
cloneNode(true) - replaceChildren
div.replaceChildren(temp.content.cloneNode(true));
cloneNode(true) - replace whole div
const newDiv = div.cloneNode(false); newDiv.append(temp.content.cloneNode(true)); div.parentNode.replaceChild(newDiv, div); div = newDiv;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
cloneNode(true) - While -> Remove
innerHTML
cloneNode(true) - replaceChildren
cloneNode(true) - replace whole div

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
cloneNode(true) - While -> Remove	2.6 Ops/sec
innerHTML	9.4 Ops/sec
cloneNode(true) - replaceChildren	3.8 Ops/sec
cloneNode(true) - replace whole div	23.6 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON tests the performance of various approaches for manipulating the DOM (Document Object Model) in JavaScript, specifically comparing methods for inserting and replacing nodes.

### Options Compared

1. **cloneNode(true) - While -> Remove**
   ```javascript
   while (div.firstChild) {
       div.removeChild(div.firstChild);
   }
   div.append(temp.content.cloneNode(true));
   ```
   - **Description**: This method iteratively removes all child nodes of a `div`, then appends a cloned node from a `template`.
   - **Pros**: It offers precise control over which nodes are removed before the new content is appended.
   - **Cons**: This is likely the slowest approach due to multiple DOM manipulation calls, which can be costly in terms of performance.

2. **innerHTML**
   ```javascript
   div.innerHTML = res;
   ```
   - **Description**: This method directly sets the content of the `div` using `innerHTML`, which replaces all existing content.
   - **Pros**: It's often the fastest way to replace all nodes because it directly manipulates the inner HTML, leading to fewer function calls.
   - **Cons**: This can lead to potential security issues if the content includes unescaped user input, and it can also disrupt event listeners tied to existing nodes.

3. **cloneNode(true) - replaceChildren**
   ```javascript
   div.replaceChildren(temp.content.cloneNode(true));
   ```
   - **Description**: This uses `replaceChildren()`, which replaces the children of `div` with a cloned template node.
   - **Pros**: This method is efficient and is designed for replacing children, potentially making it faster than removing them one-by-one.
   - **Cons**: Still requires DOM manipulation overhead, but typically performs better than the previous removal approach.

4. **cloneNode(true) - replace whole div**
   ```javascript
   const newDiv = div.cloneNode(false);
   newDiv.append(temp.content.cloneNode(true));
   div.parentNode.replaceChild(newDiv, div);
   div = newDiv;
   ```
   - **Description**: In this method, a new `div` is created, and the entire old `div` is replaced with the new one containing the cloned template.
   - **Pros**: This allows for a clean replacement of the entire node and avoids having to manage child nodes explicitly.
   - **Cons**: This approach might involve more overhead due to creating a new element and replacing it rather than just updating existing content.

### Libraries and Features Used

- The script uses standard web APIs, such as `document.createElement`, `append`, and `replaceChild`, which are integral to DOM manipulation in JavaScript but do not involve any additional libraries. The `template` element serves as a way to hold HTML content that can be instantiated in the DOM without being rendered immediately.

### Alternatives

Several alternatives exist for DOM manipulation in JavaScript:

- **Frameworks and Libraries**: Using libraries such as React, Vue.js, or Angular can abstract away some of the low-level DOM manipulation. This can improve performance through virtual DOMs or reactive programming models, where changes are batched and managed more effectively.
  
- **DocumentFragment**: Utilizing `DocumentFragment` can be beneficial for performance because it allows multiple nodes to be added to the DOM in a single operation, avoiding multiple reflows or repaints.
  
- **Web Components**: Custom elements made with Web Components encapsulate behavior and styling, which can provide modularity and potential performance benefits when manipulating the DOM.

### Considerations

When choosing between these DOM manipulation approaches, engineers should consider the context of their application:
- **Performance needs**: How often will these operations be performed?
- **Security aspects**: Is there user-generated content that might expose vulnerabilities (e.g., XSS)?
- **Maintainability and readability**: Choosing an approach that other developers in the team can easily read and maintain is crucial.

This benchmark provides valuable insights into the performance trade-offs of various DOM manipulation methods, crucial for developing efficient, responsive web applications.

Related benchmarks:

cloneNode(true) vs innerHMTL - w/ Dom Destroy and Replace (version: 2)

Test speed of clone / append nodes vs replacing innerHTML.

Comparing performance of: cloneNode(true) - While -> Remove vs innerHTML vs cloneNode(true) - replaceChildren vs cloneNode(true) - replace whole div

Created: one month ago by: Registered User

Jump to the latest result

cloneNode(true) - While -> Remove

innerHTML

cloneNode(true) - replaceChildren

cloneNode(true) - replace whole div

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):