Benchmark: createElement vs cloneNode with content

Tests:

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

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark is comparing two approaches to create new DOM elements:

1. `document.createElement('div')`
2. `node.cloneNode(true)`

**What is being tested?**

In this benchmark, we're testing which approach is faster when creating a large number of DOM elements with some content. The test cases are identical in terms of the content (`hey you`), but differ in how they create new elements.

**Options being compared**

We have two options:

1. **`document.createElement('div')`**: This approach creates a new DOM element from scratch, using the `createElement()` method.
2. **`node.cloneNode(true)`**: This approach creates a copy of an existing DOM element, using the `cloneNode()` method.

**Pros and Cons**

* **`document.createElement('div')`**:
	+ Pros: Creates a completely new element, which can be beneficial for certain use cases (e.g., when creating a new node with custom attributes).
	+ Cons: Can be slower than cloning an existing element, especially if the new element needs to be set up and configured.
* **`node.cloneNode(true)`**:
	+ Pros: Faster than creating a new element from scratch, as it reuses the existing element's attributes and structure.
	+ Cons: Creates a copy of an existing element, which can lead to unnecessary DOM nodes if not properly cleaned up.

**Library usage**

In this benchmark, we're using the `document` object and the `createElement()` and `cloneNode()` methods, which are part of the Web APIs.

**Special JS features or syntax**

There doesn't appear to be any special JavaScript features or syntax being used in this benchmark. The code is straightforward and relies on standard DOM API methods.

**Other alternatives**

If you wanted to test alternative approaches, here are a few possibilities:

* Using a library like `DOMPurify` or `jsdom` to create DOM elements.
* Creating DOM elements using a template engine like Handlebars or Mustache.
* Using a library like React or Angular to render components.
* Implementing your own custom element creation mechanism.

Keep in mind that these alternatives may have their own trade-offs and performance implications, so it's essential to evaluate them carefully for your specific use case.

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 9; Redmi Note 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Mobile Safari/537.36

Browser/OS: Chrome Mobile 93 on Android

View result in a separate tab

Test name	Executions per second
createElement	0.3 Ops/sec
cloneNode	3.5 Ops/sec

Related benchmarks:

createElement vs cloneNode with content (version: 0)

Faster way to create new dom elements before insertion

Comparing performance of: createElement vs cloneNode

Created: 3 years ago by: Guest

Jump to the latest result

createElement

cloneNode

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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