Benchmark: createElement vs createDocumentFragment 1

Script Preparation code:

document.body.innerHTML = "";

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
createElement	813.4 Ops/sec
createDocumentFragment	601.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**What is being tested?**

The benchmark compares two approaches for creating elements in a web page:

1. `document.createElement`: This method creates a new HTML element and returns it as a reference to that element.
2. `document.createDocumentFragment`: This method creates a new document fragment, which is an immutable container for holding multiple child nodes.

**Options compared**

The benchmark compares the performance of these two approaches on the same test case:

* The same HTML structure (a `div` element with 1000 `span` elements) is created using both methods.
* The resulting fragment or element is then appended to the `body` of the document.

**Pros and Cons of each approach**

1. `document.createElement`:
	* Pros: Simple, widely supported, and easy to understand.
	* Cons: Creates a new object in memory every time it's called, which can be inefficient if called frequently.
2. `document.createDocumentFragment`:
	* Pros: More efficient than creating individual elements, as it creates a single container for multiple child nodes. This can lead to better performance, especially when dealing with large datasets.
	* Cons: Less intuitive and less widely supported, requiring more knowledge of web development.

**Library usage**

In this benchmark, the `createDocumentFragment` method uses the `document.createDocumentFragment()` method, which is a standard HTML5 API. This method creates a new document fragment and returns it as a reference to that fragment.

**Special JS feature or syntax**

There are no special JavaScript features or syntaxes used in this benchmark beyond what's commonly available in modern JavaScript implementations.

**Other alternatives**

If you're looking for alternative approaches, consider the following:

* Using a virtual DOM library like React or Angular, which can optimize rendering and reduce the need for frequent DOM manipulations.
* Using a library like jQuery, which provides an abstraction layer over the DOM that can simplify DOM manipulation and improve performance.

Keep in mind that these alternatives may introduce additional dependencies, complexity, or trade-offs in terms of performance and learnability.

Related benchmarks:

createElement vs createDocumentFragment 1 (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):