Benchmark: createElement vs innerHTML inside DocumentFragment

Tests:

createElement
const list = []; for (i = 10000; i--;) { const fragment = document.createDocumentFragment(); for (j = 10; j--;) { const p = document.createElement('p'); p.classList.add('font-bold'); p.textContent = 'Hello!'; fragment.appendChild(p); } list.push(fragment); }
innerHTML
const list = []; for (i = 10000; i--;) { const fragment = document.createDocumentFragment(); let html = ''; for (j = 10; j--;) { html += '<p class="font-bold">Hello!</p>'; } fragment.innerHTML = html; list.push(fragment); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6.1 Safari/605.1.15

Browser/OS: Safari 16 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
createElement	5.8 Ops/sec
innerHTML	26.0 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 provided benchmark and its test cases.

**Benchmark Definition**

The benchmark measures the performance of two approaches to create and insert HTML elements into a DOM DocumentFragment:

1. `innerHTML`: This approach uses the `innerHTML` property of the DocumentFragment to set the HTML content. It creates an HTML string, appends it to the fragment, and then sets the innerHTML.
2. `createElement`: This approach creates individual HTML elements using the `createElement` method and appends them to the DocumentFragment.

**Options Compared**

The two options are compared in terms of their performance when creating and inserting 10 `<p class="font-bold">Hello!</p>` elements into a DOM DocumentFragment before insertion.

**Pros and Cons of Each Approach**

1. **innerHTML**
	* Pros:
		+ Faster, as it involves less overhead than creating individual elements.
	* Cons:
		+ May not be suitable for cases where the HTML structure needs to be dynamic or complex.
2. **createElement**
	* Pros:
		+ Allows for more control over the HTML structure and content.
	* Cons:
		+ Slower, as it involves creating individual elements.

**Library Used**

In both test cases, the `document` object is used, which is a part of the DOM (Document Object Model) API. The `document.createDocumentFragment()` method creates a DocumentFragment, which allows for efficient insertion and removal of HTML elements without affecting the parent element's layout.

**Special JavaScript Features or Syntax**

There are no special JavaScript features or syntax mentioned in this benchmark.

**Other Alternatives**

If you need to create and insert a large number of HTML elements into a DOM DocumentFragment, other approaches might be considered:

1. **DOM mutations**: Using methods like `appendChild`, `insertBefore`, or `removeChild` to manipulate the DocumentFragment.
2. **Template literals**: Creating a template literal string and using the `innerHTML` property to set the content.
3. **String interpolation**: Using string interpolation techniques, such as using `String.prototype.replace()` or `Array.prototype.map()`, to create and insert HTML elements.

Keep in mind that these alternatives might have different performance characteristics compared to the `innerHTML` and `createElement` approaches.

Related benchmarks:

createElement vs innerHTML inside DocumentFragment (version: 0)

Fastest way to create 10 <p class="font-bold">Hello!</p>-elements inside a DOM DocumentFragment before insertion.

Comparing performance of: createElement vs innerHTML

Created: 4 years ago by: Guest

Jump to the latest result

createElement

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