Benchmark: DOM api vs innerHTML

HTML Preparation code:

<div id="body"></div>

Script Preparation code:

const body = document.getElementById('body');

Tests:

with wrap
let i = 1000; let wrap = document.createElement('div'); while (i--) { let a = document.createElement('span'); wrap.appendChild(a); } body.appendChild(wrap);
without createDocumentFragment
let i = 1000; while (i--) { let a = document.createElement('span'); body.appendChild(a); }
with createDocumentFragment
let i = 1000; let fr = document.createDocumentFragment(); while (i--) { let a = document.createElement('span'); fr.appendChild(a); } body.appendChild(fr);
wrap with display
let i = 1000; let wrap = document.createElement('div'); wrap.style.display = 'none'; while (i--) { let a = document.createElement('span'); wrap.appendChild(a); } body.appendChild(wrap); wrap.style.display = 'block';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
with wrap
without createDocumentFragment
with createDocumentFragment
wrap with display

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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 and explain what is tested, compared options, pros and cons of each approach, and other considerations.

**Benchmark Overview**

The benchmark compares the performance of three different approaches to create and append elements to the DOM:

1. **With `createDocumentFragment`**: Using `document.createDocumentFragment()` to group elements together before appending them to the DOM.
2. **Without creating a fragment**: Appending elements directly to the DOM without using a fragment.
3. **Wrap with display**: Wrapping the elements in a `div` element and displaying it, but not creating a fragment.

**What is tested?**

The benchmark tests which approach has the fastest execution time for appending 1000 elements to the DOM.

**Options compared**

* With `createDocumentFragment`: This approach groups multiple elements together before appending them to the DOM. It's expected to be faster because it reduces the number of DOM mutations.
* Without creating a fragment: This approach appends each element individually to the DOM, which is slower due to more frequent DOM mutations.
* Wrap with display: This approach wraps the elements in a `div` element and displays it, but doesn't create a fragment. It's expected to be faster than "Without creating a fragment" because it groups some elements together.

**Pros and Cons of each approach**

* **With `createDocumentFragment`**:
	+ Pros: Reduces DOM mutations, can be faster.
	+ Cons: May have performance overhead due to creation of the fragment.
* **Without creating a fragment**:
	+ Pros: No performance overhead for creating fragments.
	+ Cons: More frequent DOM mutations, likely slower.
* **Wrap with display**:
	+ Pros: Groups some elements together, potentially faster than "Without creating a fragment".
	+ Cons: May have unnecessary overhead due to wrapping in a `div` element.

**Library usage**

The benchmark uses the `document` object and its methods (e.g., `createDocumentFragment()`, `appendChild()`), which are part of the DOM API. The `document` object is used to interact with the browser's DOM.

**Special JS features or syntax**

This benchmark does not use any special JavaScript features or syntax, but it assumes that the JavaScript engine being tested supports the DOM API and its methods.

**Alternatives**

Other alternatives for creating and appending elements to the DOM include:

* Using a library like React or Angular, which provide their own APIs for managing the DOM.
* Using a virtual DOM (VDOM) library like Facebook's React or Google's Polymer.
* Using a library that optimizes DOM manipulation, such as jQuery.

Keep in mind that these alternatives may have different performance characteristics and use cases compared to the DOM API alone.

Related benchmarks:

DOM api vs innerHTML (version: 3)

Comparing performance of: with wrap vs without createDocumentFragment vs with createDocumentFragment vs wrap with display

Created: 7 years ago by: Registered User

Jump to the latest result

with wrap

without createDocumentFragment

with createDocumentFragment

wrap with display

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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