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

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days 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.

Latest run results:

Run details: (Test run date: 5 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0

Browser/OS: Firefox 67 on Windows

View result in a separate tab

Test name	Executions per second
with wrap	969.9 Ops/sec
without createDocumentFragment	246.1 Ops/sec
with createDocumentFragment	895.3 Ops/sec
wrap with display	931.6 Ops/sec

Related benchmarks:

DOM api vs innerHTML (version: 3)

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

Created: 5 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>

Experimental features:

Fastest: N/A

Slowest: N/A

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