Benchmark: append vs fragment+appendChild

HTML Preparation code:

<div id="target"></div>

Script Preparation code:

var target = document.getElementById('target');

Tests:

append
var d = [] for(let i = 0; i < 5; i++) { d.push(document.createElement('p')) } target.append(...d)
fragment + appendChild
var d = new DocumentFragment for(let i = 0; i < 5; i++) { d.appendChild(document.createElement('p')) } target.appendChild(d)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append
fragment + appendChild

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 12; SM-G780G) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.78 Mobile Safari/537.36

Browser/OS: Chrome Mobile 102 on Android

View result in a separate tab

Test name	Executions per second
append	46638.2 Ops/sec
fragment + appendChild	66626.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark is designed to compare two approaches for appending HTML elements to a DOM node: `append` and `fragment + appendChild`. The test case uses a simple HTML structure with an empty `<div>` element as the target.

**Script Preparation Code**
```javascript
var target = document.getElementById('target');
```
This line retrieves the `<div>` element with the id "target" from the DOM.

**Html Preparation Code**
```html
<div id="target"></div>
```
This creates an empty `<div>` element with the id "target".

**Individual Test Cases**

There are two test cases:

1. **append**: This test case appends 5 new `<p>` elements to the target `target.append(...d)` after creating an array of 5 new elements using `document.createElement('p')`.
2. **fragment + appendChild**: This test case uses a `DocumentFragment` object to create 5 new `<p>` elements and then appends the fragment to the target, appending each individual element afterwards: `target.appendChild(d)`.

**Comparison**

The benchmark compares these two approaches:

*   **append**: Creates an array of elements using `document.createElement('p')`, pushes them into the array, and then uses `target.append(...d)`.
*   **fragment + appendChild**: Creates a `DocumentFragment` object, appends 5 new `<p>` elements to it, and then uses `target.appendChild(d)`.

**Pros and Cons**

### Append

Pros:

*   Efficient for small datasets
*   Easy to implement and understand
*   Can be faster in some browsers due to the way `append` is implemented internally

Cons:

*   Creates multiple DOM nodes (the array of elements) which can impact performance, especially when dealing with large datasets
*   May lead to slower execution times for larger test cases because `target.append(...d)` needs to traverse through all elements and apply styles

### Fragment + appendChild

Pros:

*   Reduces the number of DOM nodes created by using a single fragment
*   Can be faster, especially when dealing with large datasets, since it doesn't require traversing through multiple nodes

Cons:

*   Requires more complex setup (creating and managing a `DocumentFragment` object)
*   May not be as efficient in older browsers that don't support the `DocumentFragment` feature

**Library: Document Fragment**

A `DocumentFragment` is an empty container element used to group DOM nodes. It allows you to create multiple elements, add them to the fragment, and then append the entire fragment to another node at once.

Using a `DocumentFragment` can improve performance by reducing the number of DOM nodes created and allowing browsers to batch append operations together, potentially leading to faster execution times for larger test cases.

**Special JS Feature: none**

There is no special JavaScript feature or syntax used in this benchmark. The comparison focuses on the two approaches for appending HTML elements.

The alternative approaches would be:

*   **insertBefore**: Inserting individual elements using `target.insertBefore(newElement, newElement)` instead of creating an array and then appending.
*   **innerHTML**: Using `target.innerHTML = '<p>Hello World!</p><p>Hello Universe!</p>'` to create elements directly in the target's inner HTML.

These alternatives might have different performance characteristics depending on the browser and test case, so it's essential to benchmark them separately for a comprehensive understanding.

Related benchmarks:

append vs fragment+appendChild (version: 0)

append vs fragment + appendChild

Comparing performance of: append vs fragment + appendChild

Created: 3 years ago by: Guest

Jump to the latest result

append

fragment + appendChild

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