Benchmark: appendChild cycles vs documentFragment

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

var container = document.getElementById('container');
var childrenAmount = 20;
var childrenToAppend = [];

for(let i = 0; i < childrenAmount; i++) {
	childrenToAppend.push(document.createElement('div'))
}

Tests:

appendChild
childrenToAppend.forEach(child => container.appendChild(child));
append documentFragment
var fragment = document.createDocumentFragment(); childrenToAppend.forEach(child => fragment.appendChild(child)); container.appendChild(fragment)
appendChild w/ requestAnimationFrame
requestAnimationFrame(() => { childrenToAppend.forEach(child => container.appendChild(child)); })
append documentFragment w/ requestAnimationFrame
var fragment = document.createDocumentFragment(); childrenToAppend.forEach(child => fragment.appendChild(child)); requestAnimationFrame(() => { container.appendChild(fragment) })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
appendChild
append documentFragment
appendChild w/ requestAnimationFrame
append documentFragment w/ requestAnimationFrame

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Linux

View result in a separate tab

Test name	Executions per second
appendChild	94107.0 Ops/sec
append documentFragment	80614.9 Ops/sec
appendChild w/ requestAnimationFrame	1207435.5 Ops/sec
append documentFragment w/ requestAnimationFrame	126065.2 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and its components to provide an explanation that's easy to understand.

**Benchmark Overview**

The `MeasureThat.net` website allows users to create and run JavaScript microbenchmarks. In this case, we're looking at a benchmark that compares four different approaches for appending DOM elements to an HTML container: `appendChild`, `appendDocumentFragment`, `appendChild w/ requestAnimationFrame`, and `append documentFragment w/ requestAnimationFrame`.

**Benchmark Definition JSON**

The benchmark definition JSON contains the following information:

* `Name`: The name of the benchmark, which is "appendChild cycles vs documentFragment".
* `Description`: An empty string indicating that there's no description for this benchmark.
* `Script Preparation Code`: A JavaScript code snippet that sets up a container element and creates an array of 20 child elements. This code is executed before running each test case.
* `Html Preparation Code`: The HTML code for the container element, which is a simple `<div>` with an ID of "container".

**Individual Test Cases**

The benchmark consists of four individual test cases:

1. **appendChild**: This test case uses the standard `appendChild` method to append all child elements to the container.
2. **appendDocumentFragment**: This test case uses the `document.createDocumentFragment()` method to create a fragment, which is then used to append all child elements to the container. Finally, the fragment is appended directly to the container using another call to `appendChild`.
3. **appendChild w/ requestAnimationFrame**: This test case uses the `requestAnimationFrame` function to schedule an animation frame that appends all child elements to the container.
4. **append documentFragment w/ requestAnimationFrame**: Similar to the previous test case, but it also appends the fragment directly to the container using another call to `appendChild`.

**Comparison of Options**

Here's a comparison of the four options:

* **`appendChild` vs `appendDocumentFragment`**: These two approaches have different performance characteristics. `AppendChild` is a synchronous operation that can lead to issues with DOM layout and performance, whereas `appendDocumentFragment` is an asynchronous operation that allows for better performance and layout control.
	+ Pros of `appendDocumentFragment`: Better performance and layout control.
	+ Cons of `appendDocumentFragment`: Requires more JavaScript code and can be slower in some cases (due to the overhead of creating a fragment).
* **`appendChild w/ requestAnimationFrame` vs `append documentFragment w/ requestAnimationFrame`**: These two approaches use `requestAnimationFrame` to schedule an animation frame, which helps with performance.
	+ Pros of both: Better performance and reduced CPU usage compared to synchronous operations.
	+ Cons of both: Require more JavaScript code and can be slower in some cases (due to the overhead of scheduling an animation frame).

**Library Usage**

None of the test cases use any external libraries.

**Special JS Features or Syntax**

There's no special JavaScript feature or syntax being used in this benchmark. All tests are standard vanilla JavaScript.

**Alternatives**

If you wanted to create a similar benchmark, you could consider using other approaches, such as:

* Using `insertBefore` instead of `appendChild` for better performance.
* Implementing a custom DOM mutation algorithm for even better performance.
* Using Web Workers or another parallel computing approach to run multiple iterations concurrently.

Keep in mind that the specific options and approach will depend on your goals and requirements.

Related benchmarks:

appendChild cycles vs documentFragment (version: 0)

Comparing performance of: appendChild vs append documentFragment vs appendChild w/ requestAnimationFrame vs append documentFragment w/ requestAnimationFrame

Created: 3 years ago by: Registered User

Jump to the latest result

appendChild

append documentFragment

appendChild w/ requestAnimationFrame

append documentFragment w/ requestAnimationFrame

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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