Benchmark: JS: append vs appendChild multi

HTML Preparation code:

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

Script Preparation code:

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

Tests:

append
container.append(paragraph,paragraph,paragraph);
appendChild
container.appendChild(paragraph); container.appendChild(paragraph); 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: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Browser/OS: Chrome 115 on Windows

View result in a separate tab

Test name	Executions per second
append	717779.8 Ops/sec
appendChild	710159.2 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its results for you.

**Benchmark Definition**

The benchmark is designed to compare two different approaches for appending elements to an HTML container using JavaScript. The benchmark consists of two test cases:

1. `append`: This test case uses the `container.append()` method to append three paragraphs to the container.
2. `appendChild`: This test case uses the `container.appendChild()` method twice, first with a single paragraph and then again with two more paragraphs.

**Options Compared**

The two options being compared are:

* `append()`: A single method call that appends multiple elements at once.
* `appendChild()`: A method call that appends a single element at a time, requiring multiple calls to append additional elements.

**Pros and Cons of Each Approach**

1. **`append()`**:
	* Pros:
		+ More concise and readable code
		+ May be faster since it reduces the number of DOM mutations
	* Cons:
		+ May not work as expected in older browsers that don't support this method (it was introduced in HTML5)
2. **`appendChild()`**:
	* Pros:
		+ Works in all browsers, including older ones
		+ Allows for more control over the DOM mutations (e.g., adding multiple elements at once)
	* Cons:
		+ More verbose code and may be slower due to the increased number of DOM operations

**Library Used**

None. This benchmark doesn't use any external libraries.

**Special JS Feature/Syntax**

The `append()` method is a part of HTML5, which allows for appending multiple elements at once using a single method call. The `appendChild()` method has been supported in all browsers for a longer period and is still widely used today.

**Other Alternatives**

There are other ways to append elements to an HTML container, such as:

* Using the `DOM API` directly (e.g., `container.innerHTML += '<p>Paragraph 1</p><p>Paragraph 2</p>'`)
* Using a library like jQuery or React that provides its own DOM manipulation methods

However, these alternatives may not be relevant to this specific benchmark, which is focused on comparing the performance of `append()` and `appendChild()`.

**Benchmark Preparation Code**

The provided script preparation code creates an HTML container element with an ID of "container" and a paragraph element:

```javascript
var container = document.getElementById("container");
var paragraph = document.createElement("p");
```

This code sets up the basic structure for the benchmark, allowing it to focus on the performance differences between `append()` and `appendChild()`.

Related benchmarks:

JS: append vs appendChild multi (version: 0)

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