Benchmark: cloneNode(true) vs innerHMTL

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

Tests:

cloneNode(true)
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 year 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)	131.6 Ops/sec
innerHTML	99.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark represented in the provided JSON measures the performance of two different methods for inserting a large block of HTML content into the Document Object Model (DOM) of a web page: using `cloneNode(true)` and setting `innerHTML`.

### Tested Options

1. **`cloneNode(true)`**:
   - **Benchmark Definition**: `div.append(temp.content.cloneNode(true));`
   - This method creates a deep clone of the content of a `<template>` element. The `true` argument indicates that all descendants of the cloned node will also be cloned. It appends the cloned node to the target `div`.

2. **`innerHTML`**:
   - **Benchmark Definition**: `div.innerHTML = res;`
   - This method sets the inner HTML of the target `div` directly, replacing the existing content with the specified HTML string (`res`).

### Pros and Cons

#### `cloneNode(true)`

**Pros**:
- **Maintainability**: When you are working with complex structures or need to preserve event listeners, cloning nodes allows you to keep the original nodes intact and re-use them.
- **Security**: Cloning can be safer if you're working with dynamic content, as it helps avoid potential XSS (Cross-Site Scripting) issues since you're using existing, already validated nodes.

**Cons**:
- **Performance**: Cloning generally incurs overhead due to the creation of new node objects and can be slower than directly setting `innerHTML`, especially with substantial and deeply nested DOM trees.
  
#### `innerHTML`

**Pros**:
- **Speed**: Setting `innerHTML` is typically faster for large amounts of HTML since it's essentially a single operation that performs a bulk replacement of the inner content, thus avoiding individual node manipulations.
- **Simplicity**: For straightforward use cases, `innerHTML` is easy to write and understand.

**Cons**:
- **Loss of Events**: All event listeners and data state associated with existing child nodes will be lost when you replace the inner HTML.
- **Security**: Using `innerHTML` with untrusted content can introduce security vulnerabilities if input is not properly sanitized.

### Execution Results

In the benchmark results:
- The `cloneNode(true)` method achieved approximately **131.56 executions per second**.
- The `innerHTML` method achieved approximately **99.11 executions per second**.

From these results, we can conclude that, in this case, `cloneNode(true)` performed better than setting `innerHTML` despite its potential overhead. This may be due to the relatively simple structure being cloned and the optimizations present in the JavaScript engine for handling `cloneNode()` operations.

### Alternative Approaches

- **Document Fragments**: If inserting multiple elements, using a `DocumentFragment` can help minimize reflows and repaints by allowing multiple DOM manipulations before a single insert operation.
- **InsertAdjacentHTML**: This method allows for inserting a string of HTML at a specified position relative to a target element without replacing the entire inner HTML. It can be more efficient than `innerHTML` for adding new content rather than replacing existing content.
- **Virtual DOM Libraries**: Using frameworks or libraries that utilize a virtual DOM (like React or Vue.js) abstracts the direct manipulation of the DOM, optimizing updates and rendering. This can provide better performance on complex UIs.

These alternatives offer different trade-offs that could provide better performance depending on the specific context and use cases.

Related benchmarks:

cloneNode(true) vs innerHMTL (version: 1)

Comparing performance of: cloneNode(true) vs innerHTML

Created: one year ago by: Guest

Jump to the latest result

cloneNode(true)

innerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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