Benchmark: JS: append vs appendChild - list of elements (1000 items)

HTML Preparation code:

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

Script Preparation code:

var container = document.getElementById("container");
var paragraph = document.createElement("p");
var num = 1000;

Tests:

append
const elArray = new Array(1000).fill(paragraph); container.append(...elArray);
appendChild
for(let i = 0; i < 1000; i++) { container.appendChild(paragraph); }

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 (Macintosh; Intel Mac OS X 10.15; rv:120.0) Gecko/20100101 Firefox/120.0

Browser/OS: Firefox 120 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
append	4762.6 Ops/sec
appendChild	2515.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net!

The benchmark being tested is the performance difference between using the `append()` method and the `appendChild()` method when adding 1000 elements to an HTML paragraph element within a container.

**What is being compared?**

Two approaches are being compared:

1. **`append()`**: This method adds one or more elements to the end of the target container. In this benchmark, it's used to add an array of 1000 `p` elements to the container.
2. **`appendChild()`**: This method adds a single element to the end of the target container. In this benchmark, it's used to append each individual `p` element to the container one by one.

**Pros and Cons:**

* **`append()`**:
	+ Pros:
		- Can be more efficient for adding multiple elements at once.
		- May use less memory, as it doesn't create intermediate arrays or objects.
	+ Cons:
		- Can be slower than `appendChild()` when adding a single element per iteration, due to the overhead of creating and manipulating an array of elements.
* **`appendChild()`**:
	+ Pros:
		- Can be faster than `append()` for small numbers of elements being added one by one.
		- Allows for more control over the individual elements being added (e.g., setting attributes, styles, etc.).
	+ Cons:
		- Requires creating intermediate objects and arrays, which can consume memory.

**Library usage:**

The benchmark uses the `document` object, specifically:

* `document.getElementById()`: Retrieves an element by its ID.
* `document.createElement()`: Creates a new element (in this case, a `p` element).
* `appendChild()`: Adds a child node to the end of another element.

**Special JavaScript feature or syntax:**

None mentioned explicitly in the benchmark definition. However, it's worth noting that `fill()` is used to create an array of 1000 elements with the same value (the `paragraph` element).

**Other alternatives:**

If you wanted to test this benchmark using alternative approaches, here are a few ideas:

* **Using `insertBefore()`**: Instead of appending or appending child nodes, use `insertBefore()` to add multiple elements before an existing element.
* **Using a library like jQuery**: Instead of using vanilla JavaScript methods, use jQuery's `$()` function to select and manipulate elements.
* **Using Web Workers**: Divide the work between multiple threads (Web Workers) to add elements in parallel, potentially improving performance.

Keep in mind that these alternative approaches may require significant modifications to the benchmark code and might not accurately represent the original intent of the benchmark.

Related benchmarks:

JS: append vs appendChild - list of elements (1000 items) (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):