Benchmark: JS: append vs appendChild for multiple children

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 paragraphs = [p1, p2, p3, p4];

Tests:

append
container.append(...paragraphs);
appendChild
for (const p of paragraphs) { container.appendChild(p); }
appendChild (unrolled)
container.appendChild(p1); container.appendChild(p2); container.appendChild(p3); container.appendChild(p4);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append
appendChild
appendChild (unrolled)

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_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser/OS: Chrome 107 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
append	703009.4 Ops/sec
appendChild	855817.4 Ops/sec
appendChild (unrolled)	780617.4 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 benchmark and its test cases to understand what's being tested.

**Benchmark Overview**

The benchmark measures the performance of two different approaches for appending multiple elements to an HTML container in JavaScript: `append` and `appendChild`. The benchmark is designed to simulate a real-world scenario where you need to add multiple child elements to an HTML element.

**Test Cases**

There are three test cases:

1. **`append`**: This test case uses the `append` method of the `container` element, passing an array of paragraphs (`paragraphs`) as its argument.
2. **`appendChild`**: This test case uses a traditional loop to append each paragraph element individually using the `appendChild` method of the `container` element.
3. **`appendChild (unrolled)`**: This test case is similar to the previous one, but instead of using an array to pass multiple elements at once, it unrolls the loop by appending each element individually.

**Comparison**

The main difference between these three approaches is how they handle the number of elements being appended:

* `append`: Passes an entire array of elements as a single argument. This approach can be faster for smaller arrays but may have performance issues with very large arrays.
* `appendChild`: Uses a loop to append each element individually. This approach can be slower due to the loop overhead, but it's more flexible and works well for most use cases.
* `appendChild (unrolled)` : Similar to `appendChild`, but without the benefits of passing an array.

**Pros and Cons**

Here are some pros and cons for each approach:

* **`append`**: Pros:
	+ Fast for small arrays
	+ Easy to implement
	Cons:
	+ May have performance issues with very large arrays
	+ Limited control over individual element appending
* **`appendChild`**: Pros:
	+ More flexible and controllable than `append`
	+ Works well for most use cases
	Cons:
	+ Slower due to loop overhead
	+ Requires more code
* **`appendChild (unrolled)`**: Pros:
	+ None significant, as it's similar to `appendChild`
	Cons:
	+ Less efficient than using an array

**Library and Special Features**

There are no libraries or special features mentioned in the benchmark that would affect its performance.

**Other Considerations**

When working with HTML elements in JavaScript, you should consider the following:

* Use the most efficient method for appending elements based on your specific use case.
* Avoid unnecessary DOM manipulations to improve performance.
* Use libraries like React or Angular to abstract away DOM concerns and focus on business logic.

**Alternatives**

If you're looking for alternative approaches to append elements, you could consider using:

* `insertAdjacentHTML`: A modern method for inserting HTML content into an element.
* `Array.prototype.forEach` with the `DOMException` callback: Another approach to appending elements individually.
* Native browser methods like `DocumentFragment` or `HTMLElement.createDocumentFragment()`: For more complex DOM manipulation scenarios.

Keep in mind that each alternative has its own trade-offs and may not be suitable for all use cases.

Related benchmarks:

JS: append vs appendChild for multiple children (version: 0)

Comparing performance of: append vs appendChild vs appendChild (unrolled)

Created: 2 years ago by: Registered User

Jump to the latest result

append

appendChild

appendChild (unrolled)

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