Benchmark: JS: append vs appendChild multiple elements

HTML Preparation code:

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

Script Preparation code:

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

Tests:

append
container.append(paragraph,paragraph1,paragraph2,paragraph3);
appendChild
container.appendChild(paragraph); container.appendChild(paragraph1); container.appendChild(paragraph2); container.appendChild(paragraph3);

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: 4 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 143 on Android

View result in a separate tab

Test name	Executions per second
append	285242.3 Ops/sec
appendChild	335889.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares two ways to append multiple elements to an HTML container using JavaScript: `container.append()` with multiple arguments (known as "polyfill" behavior) versus `container.appendChild()`. This test is focused on measuring the performance difference between these two approaches.

**Options Compared**

There are two options being compared:

1. **`append()` method with multiple arguments**: This method uses a polyfill to handle multiple elements by concatenating them into an array and then appending that array to the container.
2. **`appendChild()` method**: This is the standard method for adding a single element to an HTML container.

**Pros and Cons of Each Approach**

**`append()` method with multiple arguments:**

Pros:

* More intuitive and readable code
* Can handle any number of elements without modifying the API

Cons:

* May incur performance overhead due to array creation and concatenation
* Not supported in older browsers that don't support `append()` (but this is already handled by polyfills)

**`appendChild()` method:**

Pros:

* More efficient, as it only adds a single element at a time
* Generally faster than the `append()` method

Cons:

* Requires calling `appendChild()` multiple times for each element
* Less intuitive and less readable code (especially for developers who aren't familiar with this method)

**Other Considerations**

The test also considers the impact of polyfilling the `append()` method on performance. In older browsers, a polyfill would be used to provide support for the `append()` method, which might incur some overhead.

**Library and Special JS Feature**

There is no explicit library mentioned in the benchmark definition or results. However, it's worth noting that modern browsers like Firefox already include a polyfill for the `append()` method to ensure compatibility with older browsers.

**Test Case Explanation**

The test case consists of two individual tests:

1. **`append()` method**: This test creates four paragraphs and appends them to the container using the `append()` method with multiple arguments.
2. **`appendChild()` method**: This test creates four paragraphs and appends them to the container using separate calls to `appendChild()` for each paragraph.

**Alternative Test Cases**

Other alternatives might include:

* Comparing the performance of other DOM methods, such as `insertAdjacentHTML()` or `createElementAndInsert()`.
* Testing the performance of other libraries or frameworks that provide similar functionality.
* Measuring the performance of different polyfill implementations for the `append()` method.

These alternative test cases could help developers understand the performance implications of using different approaches to adding elements to an HTML container, and inform decisions about which approach is best suited for their specific use case.

Related benchmarks:

JS: append vs appendChild multiple elements (version: 0)

Comparing performance of: append vs appendChild

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