Benchmark: createElement vs insertAdjacentHTML but actually works V2

HTML Preparation code:

<div id="test"></div>

Tests:

createElement
const elemTpl = document.createElement("div"); elemTpl.classList.add("testClass"); newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { newElement.appendChild( elemTpl.cloneNode(true) ); } document.getElementById("test").appendChild(newElement);
insertAdjacentHTML
html = "<div id='testing'>" for (i = 0; i < 1000; i++) { html += "<div class='testClass'></div>"; } html += "</div>"; document.getElementById("test").insertAdjacentHTML("beforeend", html);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
insertAdjacentHTML

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/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Windows

View result in a separate tab

Test name	Executions per second
createElement	864.5 Ops/sec
insertAdjacentHTML	702.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases to understand what is being tested.

**Benchmark Definition**

The benchmark measures the performance difference between two approaches:

1. `createElement`: Creating an HTML element using the `document.createElement()` method.
2. `insertAdjacentHTML`: Inserting HTML content into an element using the `insertAdjacentHTML()` method, specifically with the `beforeend` attribute.

**Options Compared**

The options being compared are:

* Using `document.createElement()` to create a new HTML element and then appending it to another element (`createElement` approach).
* Using `insertAdjacentHTML()` to insert multiple HTML elements into an existing element without creating intermediate elements (`insertAdjacentHTML` approach).

**Pros and Cons**

**createElement Approach:**

Pros:

* More control over the creation process, allowing for custom attributes, events, and styles.
* Can be more flexible when dealing with complex HTML structures.

Cons:

* Requires more memory allocation and garbage collection due to creating multiple elements.
* May lead to slower performance if many elements need to be created and appended.

**insertAdjacentHTML Approach:**

Pros:

* Faster execution time since it involves less overhead than creating intermediate elements.
* More efficient for large-scale rendering, as it reduces the number of DOM mutations.

Cons:

* Limited control over the creation process, making it harder to customize attributes or events.
* May lead to slower performance if the resulting HTML is too complex or nested deeply.

**Library and Purpose**

None are mentioned in this specific benchmark. However, `insertAdjacentHTML()` is a modern HTML5 method that allows for efficient insertion of HTML content without creating intermediate elements.

**Special JavaScript Features/Syntax**

None are explicitly mentioned in this benchmark.

**Other Considerations**

1. **Memory allocation**: Both approaches can lead to increased memory usage due to the creation of multiple elements. However, `insertAdjacentHTML()` might be more memory-efficient for large-scale rendering.
2. **DOM mutations**: The number of DOM mutations (additions or removals) affects performance. Creating many elements with `createElement` can lead to more mutations than using `insertAdjacentHTML`.
3. **Browser support**: Both methods are widely supported in modern browsers, but some older browsers might have issues with `insertAdjacentHTML`.

**Alternative Approaches**

1. Using other HTML creation methods, such as:
	* `innerHTML`: Assigning HTML content directly to an element's innerHTML property.
	* `textContent`: Assigning text content directly to an element's textContent property.
2. Using library or framework-specific solutions, depending on the specific requirements and constraints of your project.

Keep in mind that this benchmark is focused specifically on comparing the performance of these two approaches (`createElement` and `insertAdjacentHTML`). Other factors, like browser version, operating system, and hardware specifications, can also impact the results of similar benchmarks.

Related benchmarks:

createElement vs insertAdjacentHTML but actually works V2 (version: 0)

Comparing performance of: createElement vs insertAdjacentHTML

Created: 5 years ago by: Guest

Jump to the latest result

createElement

insertAdjacentHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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