Benchmark: innerHTML vs cloneNode

Tests:

innerHTML
const div = document.createElement('div'); div.innerHTML = '<p>FIRMWARE WINDOW</p>'; const modal = document.createElement('div'); let n = 0; while(true) { n++; const cloneText = div.innerHTML; modal.innerHTML = cloneText; if(n===100) break; }
cloneNode
const div = document.createElement('div'); div.innerHTML = '<p>FIRMWARE WINDOW</p>'; const modal = document.createElement('div'); let n = 0; while(true) { n++; const cloneElement = div.cloneNode(true); modal.replaceChildren(cloneElement); if(n===100) break; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
cloneNode

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:148.0) Gecko/20100101 Firefox/148.0

Browser/OS: Firefox 148 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
innerHTML	19620.9 Ops/sec
cloneNode	29933.4 Ops/sec

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

LLMs can make mistakes. Check important info.

In the provided benchmark, two different approaches for updating the content of a DOM (Document Object Model) element in JavaScript are compared: using `innerHTML` and using `cloneNode`.

### Benchmark Overview

1. **Test Cases**:
   - **innerHTML**: This test case creates a `div` and assigns its `innerHTML` to another `div` (modal) in a loop. Specifically, it captures the HTML content of the original `div` and reassigns it to the `modal` div.
   - **cloneNode**: This test case also begins with the same initial `div`, but it uses the `cloneNode` method to create a deep copy of the `div`. It then replaces the content of the modal with the cloned element.

### Comparison

**1. Using `innerHTML`:**
   - **Pros**:
     - Simple syntax and straightforward to use.
     - Suitable for scenarios where you need to set HTML content directly.
   - **Cons**:
     - Parsing the HTML into DOM nodes can be computationally expensive, especially as the size of the HTML grows.
     - Potentially insecure if the HTML includes user-generated content, leading to XSS (Cross-Site Scripting) vulnerabilities.

**2. Using `cloneNode`:**
   - **Pros**:
     - Efficient when you want to create exact copies of DOM elements, especially with deeper nested structures, as it avoids re-parsing HTML.
     - Safer in terms of avoiding XSS vulnerabilities since it doesn't rely on HTML interpretation.
   - **Cons**:
     - Slightly more complex, as it requires understanding the `cloneNode` method and its parameters (deep vs shallow cloning).
     - Can lead to higher memory usage if large trees of nodes are cloned unnecessarily.

### Benchmark Results
- According to the latest benchmark results, the `cloneNode` method performed better with **20,184.95 executions per second**, compared to the `innerHTML` method, which achieved **14,554.50 executions per second**. This indicates that using `cloneNode` is likely more efficient for this particular use case.

### Other Considerations
- **Performance**: When considering performance, it is essential to balance the simplicity of the code with its efficiency. The results indicate that for this type of operation, `cloneNode` is preferable.
- **Memory Usage**: When heavy DOM manipulation is involved, memory usage should also be taken into account, especially in resource-constrained environments.
- **Browser Compatibility**: Both methods have wide browser support; however, performance may vary between different browsers and their versions.

### Alternatives
- **Document Fragment**: You could use a `DocumentFragment` to reduce reflows and repaints when inserting multiple elements into the DOM.
- **Text Content**: If no HTML formatting is required, using `textContent` could be faster and more secure than `innerHTML`.
- **Creating Elements**: Instead of using `innerHTML` or `cloneNode`, creating elements programmatically using `document.createElement()` and appending them to the DOM can provide more control and potentially better performance, especially when combined with `DocumentFragment`.

In summary, both approaches have their use cases, but for this benchmark, `cloneNode` demonstrated superior performance, highlighting its advantages in scenarios where the precise state of DOM elements needs to be preserved with minimal overhead.

Related benchmarks:

innerHTML vs cloneNode (version: 6)

Comparing performance of: innerHTML vs cloneNode

Created: one year ago by: Registered User

Jump to the latest result

innerHTML

cloneNode

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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