Benchmark: createElement vs cloneNode vs cloneNode-lite

Tests:

createElement
var list = [], n = 0; while(true) { n++; list.push(document.createElement('div')); if(n===100000) break; }
cloneNode
var list = [], n = 0, node = document.createElement('div'); while(true) { n++; list.push(node.cloneNode(true)); if(n===100000) break; }
cloneNode lite
var list = [], n = 0, node = document.createElement('div'); while(true) { 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
createElement
cloneNode
cloneNode lite

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/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
createElement	27.9 Ops/sec
cloneNode	46.3 Ops/sec
cloneNode lite	45.3 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 its test cases.

**Benchmark Overview**

The benchmark measures the performance of three approaches to create new DOM elements: `createElement`, `cloneNode`, and `cloneNode lite`. The goal is to find the fastest way to create new DOM elements before insertion.

**Options Compared**

1. **`createElement`**: Creates a new DOM element from scratch using the `document.createElement()` method.
2. **`cloneNode`**: Clones an existing DOM node using the `node.cloneNode(true)` method, which creates a deep copy of the original node.
3. **`cloneNode lite`**: A variant of `cloneNode` that only clones the node's child nodes, without creating a new container element.

**Pros and Cons**

* **`createElement`**:
	+ Pros: Simple and efficient, no overhead from cloning an existing node.
	+ Cons: Creates a new DOM element every time, which can be slower than cloning an existing node.
* **`cloneNode`**:
	+ Pros: Faster than creating a new DOM element, as it reuses the original node's resources.
	+ Cons: Creates a deep copy of the original node, which can lead to memory issues if not handled properly.
* **`cloneNode lite`**:
	+ Pros: Balances between `createElement` and `cloneNode`, with less overhead than cloning an entire node.
	+ Cons: May still create some unnecessary objects in the DOM tree.

**Library Used**

None, as these test cases do not rely on any external libraries.

**Special JS Feature/Syntax**

None mentioned explicitly. However, it's worth noting that the `cloneNode lite` approach relies on a specific implementation detail of the `cloneNode` method, which is only available in modern browsers (e.g., Firefox 89+).

**Other Alternatives**

If you're interested in exploring other approaches, here are some alternatives:

* **Using a DOM library**: Some libraries like jQuery or React Native provide their own ways to create new DOM elements efficiently.
* **Using WebAssembly**: You can compile your JavaScript code into WebAssembly (WASM) and execute it using the WASM runtime, which can provide better performance.
* **Using a custom implementation**: Depending on your specific use case, you might be able to optimize the `createElement` and `cloneNode` methods by implementing them yourself in a way that's tailored to your needs.

Keep in mind that these alternatives may require significant modifications to your codebase and might not provide the same level of performance as the benchmarked approaches.

Related benchmarks:

createElement vs cloneNode vs cloneNode-lite (version: 0)

Faster way to create new dom elements before insertion

Comparing performance of: createElement vs cloneNode vs cloneNode lite

Created: 3 years ago by: Guest

Jump to the latest result

createElement

cloneNode

cloneNode lite

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