Benchmark: createElement vs createDocumentFragment

Tests:

createElement
var root = document.createElement("div"); document.body.appendChild(root); for (var i = 0; i < 1000; i++) { var e = document.createElement("span"); e.innerText = i + " text"; root.appendChild(e); }
createDocumentFragment
var frag = document.createDocumentFragment(); var root = document.createElement("div"); for (var i = 0; i < 1000; i++) { var e = document.createElement("span"); e.innerText = i + " text"; root.appendChild(e); } document.body.appendChild(frag);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
createDocumentFragment

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/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Browser/OS: Chrome 136 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
createElement	1331.5 Ops/sec
createDocumentFragment	337.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark on the MeasureThat.net website, which compares the performance of two approaches: `document.createElement` and `document.createDocumentFragment`. The benchmark is designed to measure the creation and appending of elements to a document.

**Benchmark Definition**

The benchmark definition consists of two test cases:

1. **createElement**: This test case creates an element (`<div>`) using `document.createElement`, appends it to the document body, and then creates 1000 `<span>` elements with varying text content, each appended to the original element.
2. **createDocumentFragment**: This test case creates a `document.createDocumentFragment` instance, which is not visible in the DOM, and then creates an element (`<div>`) using `document.createElement`, appends it to the fragment, and then creates 1000 `<span>` elements with varying text content, each appended to the original element. Finally, the entire fragment is appended to the document body.

**Comparison of Options**

The two approaches have different performance characteristics:

1. **createElement**:
	* Pros: Simpler and more straightforward approach.
	* Cons: May lead to slower performance due to DOM manipulation overhead (e.g., appending elements to the DOM).
2. **createDocumentFragment**:
	* Pros: Reduces DOM manipulation overhead by not directly appending elements to the document body, which can be faster.
	* Cons: Requires more complex logic and may introduce additional overhead due to fragment creation.

**Library Usage**

Neither of the test cases uses any external libraries. However, both approaches rely on the `document` object, which is a part of the HTML DOM (Document Object Model).

**Special JS Features/Syntax**

The benchmark does not explicitly use any special JavaScript features or syntax. However, it assumes that the `createDocumentFragment()` method is supported by the target browser, which may not be the case for older browsers.

**Other Alternatives**

There are other approaches to create elements and append them to the DOM, such as:

1. **Using a virtual DOM**: Instead of directly manipulating the DOM, you can use a virtual DOM library (e.g., React or Virtual DOM) to manage the state of your application.
2. **Using a library like JSDOM**: JSDOM is a JavaScript library that creates a virtual DOM and provides methods for manipulating it.
3. **Using Web Workers**: You can create elements in a separate thread using Web Workers, which can improve performance by offloading computationally expensive tasks.

Keep in mind that these alternatives may have different performance characteristics and trade-offs compared to the `document.createElement` and `createDocumentFragment` approaches.

Related benchmarks:

createElement vs createDocumentFragment (version: 0)

Comparing performance of: createElement vs createDocumentFragment

Created: 4 years ago by: Guest

Jump to the latest result

createElement

createDocumentFragment

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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