Benchmark: createElement vs cloneNode vs JQuery

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

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

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

cloneNode

42/s

createElement

29/s

JQuery(cloneNode)

16/s

JQuery

12/s

Fastest: cloneNode (3.4x faster)

View exact numbers

✓ cloneNode: 42 ops/sec
• createElement: 29 ops/sec
• JQuery(cloneNode): 16 ops/sec
• JQuery: 12 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
JQuery
JQuery(cloneNode)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:149.0) Gecko/20100101 Firefox/149.0

Browser/OS: Firefox 149 on Linux

View result in a separate tab

cloneNode

89/s

JQuery(cloneNode)

68/s

createElement

43/s

JQuery

40/s

View exact numbers

Test name	Executions per second
✓ cloneNode	89 Ops/sec
JQuery(cloneNode)	68 Ops/sec
createElement	43 Ops/sec
JQuery	40 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down what's being tested in this benchmark, explain the pros and cons of different approaches, and describe any libraries or special features used.

**Benchmark Overview**

The benchmark compares three ways to create new DOM elements: `createElement`, `cloneNode`, and using jQuery. The goal is to determine which method is faster for creating a large number of elements before insertion into the DOM.

**Test Cases**

Each test case has a unique benchmark definition, but they all aim to measure the performance of one of these three methods:

1. **`createElement`**: Creates a new `div` element using the `document.createElement()` method.
2. **`cloneNode`**: Clones an existing `div` element using the `cloneNode(true)` method and pushes the cloned node into an array.
3. **`JQuery`** (and its variant `JQuery(cloneNode)`): Uses jQuery to create a new `div` element using the `$` function, which is a shorthand for `jQuery()`. The `cloneNode` variation uses this same approach with cloned elements.

**Libraries and Special Features**

* **jQuery**: A JavaScript library used for DOM manipulation, events, and other tasks. In this benchmark, jQuery is used to create new elements using its `$` function.
* **Special feature:** The use of the ` cloneNode(true)` method, which creates a deep clone of an element by recursively cloning all child nodes.

**Approach Pros and Cons**

1. **`createElement`**:
	* Pros: Simple, lightweight, and easy to implement.
	* Cons: May require additional DOM operations (e.g., appending elements to the DOM) after creation.
2. **`cloneNode`**:
	* Pros: Can be faster than `createElement` for large numbers of elements, as it reuses existing node structures.
	* Cons: Requires a separate cloned element, which can add overhead.
3. **`JQuery` (and `JQuery(cloneNode)`)**:
	* Pros: Abstraction layer provides a simple and convenient way to work with DOM elements, making it easier to create large numbers of elements.
	* Cons: Adds jQuery's library footprint, which may introduce additional overhead compared to plain JavaScript implementations.

**Other Alternatives**

If you don't have access to jQuery or prefer not to use it, other alternatives for creating new DOM elements could include:

1. **`DOMParser`**: Creates a new document and allows you to create elements within it.
2. **`HTMLTemplates`**: A newer JavaScript API that provides a simple way to create HTML templates and generate new elements from them.

Keep in mind that these alternatives may not provide the same level of convenience as jQuery, but they can be useful for specific use cases or when working with older browsers that don't support modern JavaScript features.

createElement vs cloneNode vs JQuery (version: 0) Benchmark.js

Faster way to create new dom elements before insertion

Comparing performance of: `createElement vs cloneNode vs JQuery vs JQuery(cloneNode)`

Created: 5 years ago by: Guest

Go to the latest result

createElement

cloneNode

JQuery

JQuery(cloneNode)

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 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 vs JQuery (version: 0) Benchmark.js

Faster way to create new dom elements before insertion

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

Created: 5 years ago by: Guest

Go to the latest result

createElement

cloneNode

JQuery

JQuery(cloneNode)

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 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 vs JQuery vs JQuery(cloneNode)`