Benchmark: append(DocumentFragment) vs. append(list of nodes)

HTML Preparation code:

<ul id="list"></ul>

AخA
 
<ul id="list"></ul>

Script Preparation code:

list.replaceChildren()

var oneThousandItems = []
var fragment = document.createDocumentFragment()

for (let i = 1; i <= 1000; i++) {
    const li = document.createElement("li")
    li.textContent = i
    oneThousandItems.push(li)
    fragment.append(li.cloneNode(true))
}

​x
 
list.replaceChildren()​var oneThousandItems = []var fragment = document.createDocumentFragment()​for (let i = 1; i <= 1000; i++) {    const li = document.createElement("li")    li.textContent = i    oneThousandItems.push(li)    fragment.append(li.cloneNode(true))}

Tests:

append(...array)
list.replaceChildren() list.append(...oneThousandItems)
list.replaceChildren()
list.append(...oneThousandItems)
append.call(___, array)
list.replaceChildren() list.append.call(list, oneThousandItems)
list.replaceChildren()
list.append.call(list, oneThousandItems)
append(DocumentFragment)
list.replaceChildren() list.append(fragment)
list.replaceChildren()
list.append(fragment)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
append(...array)
append.call(___, array)
append(DocumentFragment)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 103 on Android

View result in a separate tab

Test name	Executions per second
append(...array)	97.3 Ops/sec
append.call(___, array)	397.9 Ops/sec
append(DocumentFragment)	38106.9 Ops/sec

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

Let's break down the provided benchmark and its test cases.

Benchmark Overview

The benchmark is designed to compare the performance of three different approaches for appending elements to an HTML list (ul element). The test aims to determine which approach is faster on mobile devices, specifically Android 10 with Chrome Mobile 103 browser.

Options Compared

There are three options being compared:

append(...array): This approach appends individual elements from the array directly to the list using the append method.
append.call(___, array): This approach uses the call method to bind the append method to a context (in this case, the list element), and then calls it with the array as an argument.
append(DocumentFragment): This approach appends a cloned DocumentFragment containing all elements from the array using the append method.

Pros and Cons

append(...array):
- Pros: Simple, widely supported, and easy to understand.
- Cons: May involve more DOM manipulations, leading to slower performance on mobile devices with limited resources.
append.call(___, array):
- Pros: Can be faster than the first approach since it avoids direct appending of individual elements.
- Cons: Requires understanding of the call method and its usage in this context.
append(DocumentFragment):
- Pros: Can be faster on mobile devices with limited resources, as it reduces DOM manipulations.
- Cons: May not be supported by older browsers or have better performance on desktop devices.

Libraries Used

None of the test cases explicitly use a JavaScript library. However, the DocumentFragment class is a built-in browser API for representing a subset of a document's content.

Special JS Features/Syntax

The call method is used in one of the test cases to bind the append method to a context.
DocumentFragments are used in the third test case to append elements.

Other Alternatives

If you're interested in exploring alternative approaches, consider these:

Using insertAdjacentHTML: Instead of appending individual elements or using DocumentFragment, you can use insertAdjacentHTML method on the list element.
Using a library like Lodash: If you want to simplify your code and take advantage of optimized functions for common DOM manipulations.

Keep in mind that these alternatives may not be directly applicable to this specific benchmark, but they might be worth exploring in other scenarios where performance is crucial.

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Overview**

**Options Compared**

There are three options being compared:

1. **append(...array)**: This approach appends individual elements from the array directly to the list using the `append` method.
2. **append.call(___, array)**: This approach uses the `call` method to bind the `append` method to a context (in this case, the `list` element), and then calls it with the array as an argument.
3. **append(DocumentFragment)**: This approach appends a cloned DocumentFragment containing all elements from the array using the `append` method.

**Pros and Cons**

1. **append(...array)**:
	* Pros: Simple, widely supported, and easy to understand.
	* Cons: May involve more DOM manipulations, leading to slower performance on mobile devices with limited resources.
2. **append.call(___, array)**:
	* Pros: Can be faster than the first approach since it avoids direct appending of individual elements.
	* Cons: Requires understanding of the `call` method and its usage in this context.
3. **append(DocumentFragment)**:
	* Pros: Can be faster on mobile devices with limited resources, as it reduces DOM manipulations.
	* Cons: May not be supported by older browsers or have better performance on desktop devices.

**Libraries Used**

None of the test cases explicitly use a JavaScript library. However, the `DocumentFragment` class is a built-in browser API for representing a subset of a document's content.

**Special JS Features/Syntax**

* The `call` method is used in one of the test cases to bind the `append` method to a context.
* DocumentFragments are used in the third test case to append elements.

**Other Alternatives**

If you're interested in exploring alternative approaches, consider these:

1. **Using `insertAdjacentHTML`**: Instead of appending individual elements or using `DocumentFragment`, you can use `insertAdjacentHTML` method on the list element.
2. **Using a library like Lodash**: If you want to simplify your code and take advantage of optimized functions for common DOM manipulations.

Keep in mind that these alternatives may not be directly applicable to this specific benchmark, but they might be worth exploring in other scenarios where performance is crucial.

Related benchmarks:

append(DocumentFragment) vs. append(list of nodes) (version: 0)

Comparing performance of: append(...array) vs append.call(___, array) vs append(DocumentFragment)

Created: 2 years ago by: Guest

Jump to the latest result

append(...array)

append.call(___, array)

append(DocumentFragment)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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