Benchmark: cloneNode(true) vs innerHMTL - w/ Destroy DOM

Script Preparation code:

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

Tests:

cloneNode(true)
div.innerHTML = res; div.append(temp.content.cloneNode(true));
innerHTML
div.innerHTML = res;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
cloneNode(true)
innerHTML

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)	53.3 Ops/sec
innerHTML	114.3 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark tests two different methods of inserting content into the DOM in JavaScript: using `innerHTML` and using `cloneNode(true)` in conjunction with `innerHTML`. Here's a detailed breakdown of the benchmark, including the pros and cons of each approach, the libraries (if any) involved, and alternative methods.

### Comparison of Methods

1. **Method 1: `innerHTML`**
   - **Code**: `div.innerHTML = res;`
   - **Description**: This method directly sets the HTML content of a `<div>` element by assigning it a string of HTML (`res`).

**Pros**:
   - **Simplicity**: It’s straightforward and easy to read.
   - **Performance**: For large volumes of content, it is usually very fast because it replaces the entire content of the element in one go.

**Cons**:
   - **Performance Impact on Events**: Setting `innerHTML` can lead to losing event handlers attached to child elements since it reconstructs the entire content of the element.
   - **Cross-Site Scripting (XSS) Risk**: If the HTML string comes from user input, it can introduce security vulnerabilities.

2. **Method 2: `cloneNode(true)`**
   - **Code**: `div.append(temp.content.cloneNode(true));`
   - **Description**: This method first creates a `template` element that holds the constructed HTML. The content of this template is then cloned into the target `<div>`. The `cloneNode(true)` method creates a deep clone of the node, copying all child nodes.

**Pros**:
   - **Event Preservation**: It allows you to keep any JavaScript event listeners attached to nodes if you are cloning existing nodes (though in this case, the initial DOM setup doesn't have listeners).
   - **More Control**: Using `cloneNode(true)` provides more fine-grained control over what is appended and allows for reusing DOM elements efficiently.

**Cons**:
   - **Complexity**: Slightly more complicated to read and understand, especially for those less familiar with manipulations of the DOM.
   - **Performance**: This approach generally incurs additional overhead compared to directly setting `innerHTML`, as it involves the cloning process in the context of the DOM tree.

### Benchmark Results

From the benchmark results:
- The `innerHTML` method executed approximately **114.34 operations per second**.
- The `cloneNode(true)` method executed approximately **53.26 operations per second**.

This indicates that using `innerHTML` is significantly faster than the cloning method for this specific use case of inserting large amounts of HTML content.

### Additional Considerations
- **Browser Compatibility**: Both methods are widely supported across modern browsers. However, nuances in performance may differ based on the browser engine and optimization strategies.
- **Usage Context**: The choice between these methods can depend on specific application needs. If you require event handling or are working with existing DOM elements, `cloneNode(true)` may be more suitable despite its performance overhead.

### Alternatives
- **Document Fragments**: For better performance when inserting multiple nodes, you could use a Document Fragment to group multiple nodes together and insert them in one operation.
- **Virtual DOM**: Libraries like React use a virtual DOM to efficiently manage updates to the actual DOM. This can enhance performance and make the user experience smoother.

In summary, this benchmark illustrates the trade-offs between speed and manageability when interacting with the DOM in JavaScript. For applications where performance is critical, direct methods like `innerHTML` may be the preferred option, whereas `cloneNode(true)` may be beneficial in more complex scenarios requiring event management.

Related benchmarks:

cloneNode(true) vs innerHMTL - w/ Destroy DOM (version: 1)

Comparing performance of: cloneNode(true) vs innerHTML

Created: one month ago by: Guest

Jump to the latest result

cloneNode(true)

innerHTML

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