Benchmark: append vs appendChild multiiple

HTML Preparation code:

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

Script Preparation code:

var container = document.getElementById("container");
var p1 = document.createElement("p");
var p2 = document.createElement("p");
var p3 = document.createElement("p");
var p4 = document.createElement("p");
var p5 = document.createElement("p");

Tests:

append
container.append(p1,p2,p3,p4,p5);
appendChild
container.appendChild(p1); container.appendChild(p2); container.appendChild(p3); container.appendChild(p4); container.appendChild(p5);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append
appendChild

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 123 on Linux

View result in a separate tab

Test name	Executions per second
append	378451.8 Ops/sec
appendChild	388645.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark test for you.

**What is being tested?**

The provided JSON represents two individual test cases that compare the performance of appending multiple elements to a container element versus using `appendChild` multiple times. In both scenarios, five paragraph elements (`p1`, `p2`, `p3`, `p4`, and `p5`) are created and added to a container element with the ID "container".

**Options compared**

The two options being compared are:

1. **append**: This method appends multiple elements at once by passing an array of elements as arguments.
2. **appendChild**: This method adds each element individually, using the `appendChild` method repeatedly.

**Pros and Cons of each approach:**

* **append**
	+ Pros:
		- Faster, since it reduces the number of DOM mutations (i.e., element additions) from 5 to 1.
		- May be more efficient in terms of CPU cycles, as it can utilize the browser's optimized array append method.
	+ Cons:
		- May have higher overhead due to the creation and passing of an array of elements, which could lead to additional memory allocations or copies.
* **appendChild**
	+ Pros:
		- More explicit and predictable behavior, as each element is added individually.
		- Can be useful in certain situations where append mode might not provide the desired outcome (e.g., when modifying the DOM structure).
	+ Cons:
		- Slower, since it results in multiple DOM mutations, which can lead to slower performance.
		- May consume more CPU cycles due to the repeated DOM mutations.

**Library usage:**

There is no explicit library mentioned in the provided JSON. However, it's likely that the `document.createElement` method is a part of the DOM API, which is built-in to most browsers.

**Special JS feature or syntax:**

None mentioned in this specific benchmark test case. However, it's worth noting that some browser-specific features or polyfills might be used in real-world implementations.

**Other alternatives:**

For appending multiple elements, you could consider using:

1. **Array.prototype.slice().concat()**: This method creates a new array by concatenating the input arrays.
2. **Array.prototype.push()**: This method adds one or more elements to the end of an array.
3. **setInterval() with a single DOM mutation**: If performance is critical, you could use `setInterval()` to repeatedly append elements at regular intervals.

For appending individual elements, you can stick with the original approach using `appendChild` multiple times.

Keep in mind that these alternatives might have different trade-offs and may not be directly comparable to the original test cases.

Related benchmarks:

append vs appendChild multiiple (version: 0)

Comparing performance of: append vs appendChild

Created: 2 years ago by: Guest

Jump to the latest result

append

appendChild

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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