Benchmark: createElement vs cloneNode vs cloneNode without validations

Tests:

createTextNode
var list = [], n = 0; while(true) { n++; list.push(document.createTextNode('div')); if(n===100000) break; }
cloneNode
var list = [], n = 0, node = document.createTextNode('asdf'); while(true) { if(node.textContent !== 'div'){ node.textContent = 'div' } n++; list.push(node.cloneNode(true)); if(n===100000) break; }
cloneNode without validations
var list = [], n = 0, node = document.createTextNode('asdf'); while(true) { node.textContent = 'div' n++; list.push(node.cloneNode(true)); if(n===100000) break; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createTextNode
cloneNode
cloneNode without validations

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 89 on Windows

View result in a separate tab

Test name	Executions per second
createTextNode	14.1 Ops/sec
cloneNode	26.0 Ops/sec
cloneNode without validations	19.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares three approaches for creating new DOM elements: `createElement`, `cloneNode` with validation, and `cloneNode` without validation.

**Options Compared**

1. **createElement**: Creates a new DOM element from scratch using the `document.createElement()` method.
2. **cloneNode (with validation)**: Clones an existing DOM node (in this case, a text node) using the `cloneNode(true)` method, which performs a deep copy of the node's content and structure.
3. **cloneNode (without validation)**: Similar to the previous option, but without performing any validation on the cloned node's content or structure.

**Pros and Cons**

1. **createElement**: Pros:
	* Creates a new element from scratch, ensuring that no side effects occur during creation.
	* Can be more efficient for simple elements like text nodes.
Cons:
	* May involve more overhead due to JavaScript engine optimizations and DOM manipulation.
2. **cloneNode (with validation)**: Pros:
	* Fast and efficient, as it reuses the original node's content and structure.
	* Minimizes the number of DOM operations required.
Cons:
	* May lead to issues if the cloned node is not properly validated or cleaned up after use.
3. **cloneNode (without validation)**: Pros:
	* Similar performance characteristics to `cloneNode` with validation.
Cons:
	* Lacks validation, which can lead to issues if the cloned node is not properly cleaned up after use.

**Library and Special JS Features**

The benchmark uses the following JavaScript features:

1. **DOM APIs**: The benchmark utilizes various DOM methods like `document.createElement()`, `cloneNode()`, `textContent`, and others.
2. **Variable declarations**: The benchmark uses variable declarations to create and manipulate variables (e.g., `var list = [];`).

**Other Considerations**

The benchmark seems to focus on the performance of creating new DOM elements, specifically for text nodes. The test cases create a large array of cloned nodes or individual text nodes, which allows for an accurate comparison of the three approaches.

**Alternatives**

For this specific use case, alternative approaches might include:

1. Using HTML template literals or string interpolation to create DOM elements.
2. Leveraging libraries like React or Angular, which provide optimized rendering and DOM management mechanisms.
3. Implementing custom solutions using WebAssembly (WASM) or other low-level languages.

However, these alternatives might not be as relevant for this specific benchmark, which focuses on the performance of creating new DOM elements using JavaScript's standard library APIs.

Related benchmarks:

createElement vs cloneNode vs cloneNode without validations (version: 0)

Faster way to create new dom elements before insertion

Comparing performance of: createTextNode vs cloneNode vs cloneNode without validations

Created: 3 years ago by: Guest

Jump to the latest result

createTextNode

cloneNode

cloneNode without validations

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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