Benchmark: create DOM Element

HTML Preparation code:

<div id="container"></div>

Tests:

createElement
var container = document.getElementById('container'), i, j; for (i = 0; i < 100; ++i) { var div = document.createElement("div"); for(t = 0; t < 10; ++t){ var span = document.createElement("span"); span.appendChild(document.createTextNode('test')); div.appendChild(span); } container.appendChild(div); }
cloneNode
var container = document.getElementById('container'), span = document.createElement("span"), text = document.createTextNode('test'), souceDiv = document.createElement("div"), i, j; span.appendChild(text); for (i = 0; i < 100; ++i) { var div = souceDiv.cloneNode(); for(t = 0; t < 10; ++t){ var span = span.cloneNode(true); div.appendChild(span); } container.appendChild(div); }
innerHTML
var htmlStr = [], container = document.getElementById('container'), i, j; for(i = 0; i < 100; ++i){ htmlStr.push("<div>"); for(j = 0; j < 10; ++j){ htmlStr.push("<span>test</span>"); } htmlStr.push("</div>"); } container.innerHTML = htmlStr.join('');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
cloneNode
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 11; SM-A405FM) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.104 Mobile Safari/537.36 OPR/67.1.3508.63168

Browser/OS: Opera Mobile 67 on Android

View result in a separate tab

Test name	Executions per second
createElement	99.9 Ops/sec
cloneNode	157.9 Ops/sec
innerHTML	128.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 explain what's being tested.

**Benchmark Overview**

The benchmark measures the performance of three different approaches for creating and manipulating HTML elements:

1. `createElement` (Test Case 1)
2. `cloneNode` (Test Case 2)
3. `innerHTML` (Test Case 3)

**Test Cases**

Each test case consists of a script preparation code and an HTML preparation code.

**Script Preparation Code**

The script preparation code sets up the environment for the benchmark. For each test case, it:

* Declares variables (`container`, `i`, `j`) that will be used in the benchmark.
* Creates a container element using `document.getElementById('container')`.

**HTML Preparation Code**

The HTML preparation code defines the structure of the HTML document. In this case, it's a simple `<div>` element with an ID of "container". The HTML is set to be dynamically generated by the script.

**Test Cases**

Here's what each test case does:

1. **createElement**: Creates 100 `div` elements and appends 10 `span` elements inside each `div`. Each `span` contains the text "test".
2. **cloneNode**: Creates a source `div` element, clones it 100 times, and then clones each cloned element's `span` child 10 times.
3. **innerHTML**: Generates an array of HTML strings (`<div>`, `<span>test</span>`, and `</div>`), joins them together using the `join()` method, and appends the result to the container.

**Library and Special JS Features**

None of the test cases use any libraries or special JavaScript features. They are purely vanilla JavaScript implementations.

**Pros and Cons of Each Approach**

Here's a brief summary:

1. **createElement**: This approach is straightforward and easy to understand. However, it may lead to slower performance due to the repeated creation of elements.
2. **cloneNode**: Cloning elements can be faster than creating new ones, especially for large datasets. However, it may lead to memory leaks if not used carefully.
3. **innerHTML**: This approach is concise and easy to implement. However, it can be slower due to the string concatenation and parsing involved in generating the HTML.

**Other Alternatives**

Some other alternatives that could have been tested include:

* Using a library like DOM Manipulation or jQuery to simplify element creation and manipulation.
* Using a different data structure, such as an array of objects, instead of creating elements on the fly.
* Testing other approaches, such as using `document fragment` or `CSSOM`, which may provide better performance.

**Benchmark Results**

The benchmark results show that:

* `cloneNode` is the fastest approach (157.86 executions per second).
* `innerHTML` is slower than `createElement` but faster than `cloneNode`.
* The performance difference between these approaches is relatively small, indicating that the specific implementation details may not be critical for this particular benchmark.

Overall, the benchmark provides a useful insight into the relative performance of different approaches to creating and manipulating HTML elements in JavaScript.

Related benchmarks:

create DOM Element (version: 17)

Comparing performance of: createElement vs cloneNode vs innerHTML

Created: 6 years ago by: Registered User

Jump to the latest result

createElement

cloneNode

innerHTML

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