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

HTML Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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 2 months ago):

LLMs can make mistakes. Check important info.

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:

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 2 months ago):