Benchmark: CloneNode vs InnerHTML

Tests:

CloneNode
const row = '<tr><td>1</td><td>2</td></tr>'; const table = '<table><tbody>' + Array(10000).fill(row) + '</tbody></table>'; const template = document.createElement('template'); template.innerHTML = table; const div = document.createElement('div'); template.content.firstChild.cloneNode(true);
InnerHTML
const row = '<tr><td>1</td><td>2</td></tr>'; const table = '<table><tbody>' + Array(10000).fill(row) + '</tbody></table>'; const template = document.createElement('template'); template.innerHTML = table; const div = document.createElement('div'); div.innerHTML = table;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
CloneNode
InnerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
CloneNode	90.2 Ops/sec
InnerHTML	40.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Definition**

The benchmark is comparing two approaches to populate the inner HTML of an element: `CloneNode` and `InnerHTML`. The script preparation code and HTML preparation code are empty, which means that the benchmark doesn't generate any specific HTML or JavaScript setup. This allows users to focus solely on the differences between these two approaches.

**Options Compared**

The two options being compared are:

1. **CloneNode**: This method creates a deep copy of the template element's content by calling `cloneNode(true)`. The clone is then used as the inner HTML of another element.
2. **InnerHTML**: This method sets the inner HTML of an existing element using the `innerHTML` property.

**Pros and Cons**

- **CloneNode**:
	* Pros:
		+ Creates a deep copy of the content, which can be beneficial if you want to preserve the original structure and attributes of the cloned elements.
		+ Can be more efficient than setting the inner HTML if the content is complex or contains many DOM nodes.
	* Cons:
		+ Can be slower due to the overhead of cloning the entire content tree.
		+ May not be suitable for cases where the content needs to be updated dynamically, as it creates a new, independent clone.
- **InnerHTML**:
	* Pros:
		+ Faster and more efficient than CloneNode, especially for simple or static content.
		+ Allows for easier dynamic updating of the inner HTML by reassigning the `innerHTML` property.
	* Cons:
		+ Sets the entire content tree as a string, which can be slow and memory-intensive for complex content.
		+ May lead to unexpected behavior if the original HTML has been modified or is no longer valid.

**Library Used**

There is no explicit library mentioned in the benchmark definition. However, it's likely that the `innerHTML` property is implemented by a web browser-specific API (e.g., Chromium) and not a standard JavaScript library.

**Special JS Feature/Syntax**

None of the test cases use any special JavaScript features or syntax beyond the basic usage of `cloneNode` and `innerHTML`.

**Other Alternatives**

If you're interested in exploring other approaches, consider these alternatives:

1. **DOM Traversal**: Instead of using `CloneNode` or `InnerHTML`, you could use DOM traversal methods like `querySelectorAll()` or `getElementsByClassName()` to select elements and then update their content.
2. **String Manipulation**: For simple text-based content, you might consider manipulating strings directly instead of relying on DOM manipulation. This can be faster but may not preserve the original structure or attributes of the elements.

Keep in mind that these alternatives might have different performance characteristics and are suitable for specific use cases only.

Related benchmarks:

CloneNode vs InnerHTML (version: 0)

Comparing performance of: CloneNode vs InnerHTML

Created: 3 years ago by: Guest

Jump to the latest result

CloneNode

InnerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):