Benchmark: append vs fragment + appendChild

HTML Preparation code:

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

Script Preparation code:

var target = document.getElementById('target');

var dummies = [
	document.createElement('p'),
    document.createElement('p'),
    document.createElement('p'),
    document.createElement('p'),
    document.createElement('p')
];

var dummiesFragment = new DocumentFragment
dummiesFragment.appendChild(document.createElement('p'))
dummiesFragment.appendChild(document.createElement('p'))
dummiesFragment.appendChild(document.createElement('p'))
dummiesFragment.appendChild(document.createElement('p'))
dummiesFragment.appendChild(document.createElement('p'))

Tests:

append
target.append(...dummies)
fragment + appendChild
target.appendChild(dummiesFragment)

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 (Macintosh; Intel Mac OS X 10.15; rv:103.0) Gecko/20100101 Firefox/103.0

Browser/OS: Firefox 103 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
append	15048.8 Ops/sec
fragment + appendChild	15399396.0 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 definition and test cases to understand what's being tested.

**Benchmark Definition**

The benchmark definition is a JSON object that describes two test cases: `append` and `fragment + appendChild`. The script preparation code is provided, which creates an HTML target element with five dummy paragraphs. The dummies are created using the `document.createElement()` method, and a new `DocumentFragment` is created to group the dummies together.

The `Html Preparation Code` section specifies the basic HTML structure for the test case, which consists of a single `<div>` element with an ID of "target".

**What's being tested?**

In this benchmark, two approaches are compared:

1. **append**: This approach involves directly appending the dummy paragraphs to the target element using the `append()` method.
2. **fragment + appendChild**: This approach involves creating a new `DocumentFragment` that contains all the dummy paragraphs, and then appending the fragment to the target element using the `appendChild()` method.

**Pros and Cons of each approach**

1. **append**:
	* Pros: Simple and straightforward; likely to be implemented by most browsers.
	* Cons: May incur additional overhead due to string concatenation or buffer management when dealing with large numbers of elements.
2. **fragment + appendChild**:
	* Pros: Can improve performance by reducing the number of DOM mutations (i.e., appending individual elements instead of a group). This can be particularly beneficial for complex layouts or animations.
	* Cons: May require more advanced browser support, as not all browsers implement `DocumentFragment` correctly.

**Library and its purpose**

The `DocumentFragment` is a built-in JavaScript API that allows you to group multiple DOM nodes together without actually appending them to the document tree. This can improve performance by reducing the number of DOM mutations. However, it's essential to note that not all browsers support `DocumentFragment` correctly.

**Special JS feature or syntax**

In this benchmark, there are no specific JavaScript features or syntax being tested.

**Other alternatives**

If you're looking for alternative approaches to compare with `append()` and `fragment + appendChild`, some possible options could be:

1. **insertBefore()**: This approach involves inserting each dummy paragraph before the target element instead of appending them directly.
2. **createElementRange()**: This approach uses a range of nodes (i.e., all the dummy paragraphs) to insert at once, which can be beneficial for large datasets.

Keep in mind that these alternative approaches might not be as widely supported or optimized by browsers compared to `append()` and `fragment + appendChild`.

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