Benchmark: Single append vs multiple appendChild for large number of nodes

HTML Preparation code:

<div id="wrapper"></div>

Script Preparation code:

window.items = Array.from({ length: 1024 }, () => document.createElement('div'));
window.wrapper = document.getElementById('wrapper');

Tests:

append
Element.prototype.append.apply(wrapper, items);
appendChild
for (let element of items) wrapper.appendChild(element);

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: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15

Browser/OS: Safari 16 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
append	2794.5 Ops/sec
appendChild	2590.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark is designed to compare two approaches for appending elements to an HTML element:

1. `Element.prototype.append.apply(wrapper, items);`
2. `for (let element of items) wrapper.appendChild(element);`

These two approaches are being compared to measure their performance differences.

**Options Compared:**

* **`append()`**: The built-in `append()` method on the `Element` prototype allows you to add one or more elements to the end of an element's content.
* **`appendChild()`**: The `appendChild()` method on the `Element` prototype allows you to append a single child element to the end of an element's content.

**Pros and Cons:**

* **`append()`**:
	+ Pros:
		- More concise and expressive syntax
		- May be faster due to optimized implementation under the hood
	+ Cons:
		- Less explicit control over the appending process
		- May not work as expected if used with a large number of elements
* **`appendChild()`**:
	+ Pros:
		- More explicit control over the appending process
		- Works well with a large number of elements
	+ Cons:
		- Less concise and less expressive syntax
		- May be slower due to the overhead of calling multiple `appendChild()` calls

**Library:**

The benchmark uses none, as it only involves native JavaScript methods.

**Special JS Feature/Syntax:**

None mentioned in this specific benchmark. However, if we were to add more test cases, we might see features like:

* `Promise.all()`: Used for parallelizing tasks or waiting for multiple operations to complete.
* `Set` and `Map`: Used for efficient data structures and lookups.
* Async/Await: Used for handling asynchronous code in a synchronous-looking way.

**Other Alternatives:**

For comparison, we might also consider the following alternatives:

* **`insertBefore()`**: Another method on the `Element` prototype that inserts an element before another element.
* **`removeChild()`**: A method on the `Element` prototype that removes a child element from its parent's content.

These alternatives would provide additional insight into the performance of different methods for manipulating DOM elements.

Overall, this benchmark helps us understand the trade-offs between using `append()` and `appendChild()` when working with large numbers of elements in JavaScript.

Related benchmarks:

Single append vs multiple appendChild for large number of nodes (version: 0)

Just how bad is appendChild compared to append, anyway?

Comparing performance of: append vs appendChild

Created: one year ago by: Guest

Jump to the latest result

append

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