Benchmark: Compare appendChild after createElement, vs appendChild after getElementById (version: 4) (version: 1)

HTML Preparation code:

<section id="container"></section>

Tests:

appendChild to fragment, then append after getElementById (with cloneNode)
let fragment = document.createDocumentFragment(); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { fragment.appendChild(elem); elem = elem.cloneNode(); } let container = document.getElementById("container"); container.appendChild(elem)
appendChild to fragment, then append after createElement (with cloneNode)
let fragment = document.createDocumentFragment(); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { fragment.appendChild(elem); elem = elem.cloneNode(); } let container = document.createElement("section"); container.appendChild(elem)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
appendChild to fragment, then append after getElementById (with cloneNode)
appendChild to fragment, then append after createElement (with cloneNode)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:91.0) Gecko/20100101 Firefox/91.0

Browser/OS: Firefox 91 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
appendChild to fragment, then append after getElementById (with cloneNode)	16487.8 Ops/sec
appendChild to fragment, then append after createElement (with cloneNode)	14868.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explore what's being tested.

**Benchmark Overview**

The benchmark is designed to compare two approaches for appending HTML elements to a document:

1. Appending to an empty `document.createElement("div")` fragment after creating the element using `document.createElement`.
2. Appending to an empty `document.createElement("section")` container after creating the element using `document.createElement`.

**Options Compared**

The benchmark is testing two options:

* Append to a `fragment` created using `document.createDocumentFragment()` before appending to an element.
	+ **Pros**: This approach allows for efficient creation of a fragment, which can be reused multiple times. It also avoids the need to clone nodes, reducing overhead.
	+ **Cons**: This approach may not be as intuitive or straightforward as simply appending to an empty container.
* Append directly to an `element` created using `document.createElement()` before appending to another element.
	+ **Pros**: This approach is more straightforward and easy to understand. It also allows for simple cloning of elements.
	+ **Cons**: This approach may incur higher overhead due to the need to create and manage multiple nodes.

**Library and Purpose**

The benchmark uses two built-in JavaScript libraries:

* `document.createDocumentFragment()`: Creates an empty document fragment that can be used as a container for elements. The purpose is to optimize appending to fragments, reducing the number of DOM mutations.
* `document.createElement()`: Creates a new HTML element. In this case, it's used to create two separate containers (a `div` and a `section`) for appending elements.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax mentioned in the benchmark definition or test cases.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are some options:

* Using a library like jQuery's `$()` function to create elements and manipulate the DOM.
* Utilizing a DOM manipulation library like React or Angular.
* Implementing custom node cloning and appending techniques.
* Experimenting with different DOM mutation strategies, such as batch appending or using `requestAnimationFrame()` for animations.

Keep in mind that these alternatives may introduce additional complexity, dependencies, or performance overhead compared to the built-in JavaScript libraries used in this benchmark.

Related benchmarks:

Compare appendChild after createElement, vs appendChild after getElementById (version: 4) (version: 1) (version: 1)

Comparing performance of: appendChild to fragment, then append after getElementById (with cloneNode) vs appendChild to fragment, then append after createElement (with cloneNode)

Created: 3 years ago by: Registered User

Jump to the latest result

appendChild to fragment, then append after getElementById (with cloneNode)

appendChild to fragment, then append after createElement (with cloneNode)

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