Benchmark: createElement vs createDocumentFragment @oneook

Script Preparation code:

document.body.innerHTML = "";

Tests:

createElement
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(root);
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: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36

Browser/OS: Chrome 101 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
createElement	558.0 Ops/sec
createDocumentFragment	592.3 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmark test case hosted on MeasureThat.net. The benchmark compares the performance of two approaches: creating an HTML element using `document.createElement()` versus creating a document fragment using `document.createDocumentFragment()`. This test aims to measure which approach is faster for appending 1000 small elements to a parent element.

**Options Compared**

Two options are being compared:

1. **`createElement()`**: Creates a new HTML element (in this case, a `<span>` element) and appends it to the root element.
2. **`createDocumentFragment()`**: Creates a document fragment and appends small elements to it, which is then appended to the parent element.

**Pros and Cons of Each Approach**

**`createElement()`**:

Pros:

* Simpler to understand and implement
* Elements are added directly to the DOM, which can be beneficial for rendering purposes

Cons:

* Can lead to slower performance due to the overhead of creating a new element and appending it to the parent element.

**`createDocumentFragment()`**:

Pros:

* Can reduce the number of DOM nodes created, potentially improving performance
* Elements are appended to a document fragment, which can be appended to the parent element in batches, reducing the number of DOM mutations

Cons:

* May require more complex implementation and understanding of document fragments
* The performance benefits may not always outweigh the overhead of creating a new document fragment.

**Other Considerations**

* Using `createDocumentFragment()` may help reduce the impact of DOM mutation on layout and painting.
* The choice between these two approaches depends on the specific use case, such as rendering small elements versus large or complex elements.

**Library Usage**

In this benchmark, `document` is used, which is a built-in object in JavaScript. There are no external libraries required.

**Special JS Features/Syntax**

None mentioned in the provided JSON.

Related benchmarks:

createElement vs createDocumentFragment @oneook (version: 0)

Comparing performance of: createElement vs createDocumentFragment

Comparing performance of: createElement vs createDocumentFragment

Created: 2 years ago by: Guest

Jump to the latest result

createElement

createDocumentFragment

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