Benchmark: createElement vs cloneNode + querySelector

Tests:

createElement
let elements = []; for(let n=0; n<=100000;n++) { let container = document.createElement('div'); container.className = "container"; let divOne = document.createElement('div'); divOne.className = "divOne"; container.appendChild(divOne); let divTwo = document.createElement('div'); divTwo.className = "divTwo"; container.appendChild(divTwo); let divThree = document.createElement('div'); divThree.className = "divThree"; container.appendChild(divThree); elements.push({container, divOne, divTwo, divThree}); }
cloneNode + querySelector
let elements = []; const container = document.createElement('div'); container.className = "container"; let divOne = document.createElement('div'); divOne.className = "divOne"; container.appendChild(divOne); let divTwo = document.createElement('div'); divTwo.className = "divTwo"; container.appendChild(divTwo); let divThree = document.createElement('div'); divThree.className = "divThree"; container.appendChild(divThree); for(let n=0; n<=100000;n++) { const element = container.cloneNode(true); elements.push({ container: element, divOne: element.querySelector('.divOne'), divTwo: element.querySelector('.divTwo'), divThree: element.querySelector('.divThree') }); }

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

cloneNode + querySelector

6/s

createElement

4/s

Fastest: cloneNode + querySelector (1.4x faster)

View exact numbers

✓ cloneNode + querySelector: 6 ops/sec
• createElement: 4 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
cloneNode + querySelector

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

cloneNode + querySelector

11/s

createElement

10/s

View exact numbers

Test name	Executions per second
✓ cloneNode + querySelector	11 Ops/sec
createElement	10 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark and its results.

**Benchmark Definition**

The benchmark is designed to compare two approaches for creating and manipulating DOM elements:

1. `createElement`: This approach creates new elements directly using the `document.createElement` method. It then appends child elements to the newly created container.
2. `cloneNode + querySelector`: This approach creates a container element, clones it using the `cloneNode` method, and then uses the `querySelector` method to select child elements.

**Options Compared**

The two options are being compared in terms of their performance on creating and manipulating DOM elements.

**Pros and Cons of Each Approach**

* `createElement`:
	+ Pros: This approach can be more efficient for creating complex element structures, as it allows for direct manipulation of the DOM.
	+ Cons: It can result in slower execution times due to the overhead of appending child elements.
* `cloneNode + querySelector`:
	+ Pros: This approach can provide faster execution times for simple element structures, especially when using `querySelector`.
	+ Cons: It requires creating a new clone of the original element, which can be slower than direct creation.

**Library Used**

In this benchmark, no external libraries are used.

**Special JS Features/Syntax**

The benchmark uses:

* The `cloneNode` method, which creates a deep copy of an element.
* The `querySelector` method, which allows for selecting elements by their CSS selector.

**Other Considerations**

When considering these two approaches, it's essential to consider the specific use case and requirements. If you need to create complex DOM structures, `createElement` might be a better choice. However, if you're working with simple element structures and can leverage the performance benefits of `cloneNode + querySelector`, this approach might be more suitable.

**Alternatives**

Other alternatives for creating and manipulating DOM elements include:

* Using a library like jQuery, which provides a simpler API for selecting and manipulating elements.
* Employing server-side rendering or pre-rendering techniques to reduce the number of DOM mutations.
* Using CSS templates or pre-compilation to minimize the need for JavaScript-generated content.

Keep in mind that the best approach depends on your specific use case and performance requirements.

createElement vs cloneNode + querySelector (version: 0)

Comparing performance of: `createElement vs cloneNode + querySelector`

Created: 3 years ago by: Guest

Go to the latest result

createElement

cloneNode + querySelector

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

createElement vs cloneNode + querySelector (version: 0)

Comparing performance of: createElement vs cloneNode + querySelector

Created: 3 years ago by: Guest

Go to the latest result

createElement

cloneNode + querySelector

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `createElement vs cloneNode + querySelector`