Benchmark: createElement vs cloneNode vs cloneNode(false)

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
cloneNode
cloneNode(false)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 102 on Windows

View result in a separate tab

Test name	Executions per second
createElement	16.2 Ops/sec
cloneNode	27.1 Ops/sec
cloneNode(false)	29.3 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of creating new DOM elements using three different approaches: `createElement`, `cloneNode(true)`, and `cloneNode(false)`. The goal is to determine which approach is faster for creating new DOM elements before insertion.

**Options Compared**

1. **createElement**: Creates a new element from scratch.
2. **cloneNode(true)**: Clones the existing node, including all its attributes and child nodes.
3. **cloneNode(false)**: Clones the existing node, but only recursively clones its child nodes (does not copy attributes).

**Pros and Cons of Each Approach**

1. **createElement**:
	* Pros: Faster for creating simple elements, as it doesn't involve cloning or copying attributes.
	* Cons: Slower for creating complex elements with many attributes, as it requires parsing and copying them.
2. **cloneNode(true)**:
	* Pros: Faster for creating complex elements, as it only involves cloning the existing node's content.
	* Cons: Slower for simple elements, as it involves cloning and copying all attributes and child nodes.
3. **cloneNode(false)**:
	* Pros: Balanced performance between simple and complex elements, as it only recursively clones child nodes.
	* Cons: May not be as fast as `createElement` for very simple elements.

**Library Usage**

None of the benchmark cases use a specific library, but they do rely on the browser's DOM API for creating and manipulating elements.

**Special JS Features or Syntax**

This benchmark does not explicitly use any special JavaScript features or syntax. However, it does demonstrate the differences in performance between various approaches to creating DOM elements.

**Alternative Approaches**

1. **createElement() with attributes**: Creating an element using `createElement()` and then setting its attributes manually.
2. **innerHTML or outerHTML**: Using HTML strings to create elements, such as `document.createElement('div').innerHTML = '<p>Hello World!</p>'`.
3. **DOMParser**: Using the `DOMParser` API to parse HTML strings into DOM elements.

These alternative approaches may be worth considering in specific use cases, but they may also introduce additional overhead or complexity compared to using `createElement()`, `cloneNode(true)`, and `cloneNode(false)` directly.

Related benchmarks:

createElement vs cloneNode vs cloneNode(false) (version: 0)

Faster way to create new dom elements before insertion

Comparing performance of: createElement vs cloneNode vs cloneNode(false)

Created: 5 years ago by: Guest

Jump to the latest result

createElement

cloneNode

cloneNode(false)

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