Benchmark: JS: append vs appendChild multiple insert

HTML Preparation code:

<div id="container"></div>
<div id='p1'></div>
<div id='p2'></div>
<div id='p3'></div>
<div id='p4'></div>
<div id='p5'></div>

Script Preparation code:

var container = document.getElementById("container");
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
var p3 = document.getElementById("p3");
var p4 = document.getElementById("p4");
var p5 = document.getElementById("p5");

Tests:

append
container.append(p1, p2, p3, p4, p5);
appendChild
container.appendChild(p1); container.appendChild(p2); container.appendChild(p3); container.appendChild(p4); container.appendChild(p5);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append
appendChild

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of two approaches for inserting multiple elements into an HTML container: `append` and `appendChild`. The test simulates adding five child elements to the container using these methods.

**Options Compared**

Two options are compared:

1.  **`container.append(p1, p2, p3, p4, p5);`**: This approach uses the `append` method on the container element, passing an array of child elements as arguments.
2.  **`container.appendChild(p1);\r\ncontainer.appendChild(p2);\r\ncontainer.appendChild(p3);\r\ncontainer.appendChild(p4);\r\ncontainer.appendChild(p5);`**: This approach uses the `appendChild` method on the container element, appending each child element individually.

**Pros and Cons**

*   **`append` Method**:
    *   Pros: Can be more efficient for large numbers of elements, as it allows the browser to batch operations together, reducing overhead.
    *   Cons: Can lead to slower performance if individual elements are complex or have many attributes.
*   **`appendChild` Method**:
    *   Pros: Allows for better control over the insertion order and reduces the risk of conflicts between elements.
    *   Cons: Can result in slower performance due to increased overhead from repeated method calls.

**Library Used**

None. This benchmark is a native JavaScript test, not relying on any external libraries.

**Special JS Features/Syntax**

The benchmark uses the `append` and `appendChild` methods, which are part of the DOM (Document Object Model) API. These methods are widely supported across modern browsers.

**Alternative Approaches**

Other approaches could be considered:

1.  **Using a library or framework**: Some libraries like React or Angular provide built-in support for inserting elements into the DOM. However, this benchmark is designed to focus on native JavaScript performance.
2.  **Using a custom implementation**: Developers might choose to implement their own solution using JavaScript, which could potentially offer better performance in specific cases.

**Benchmark Code Explanation**

The provided `Script Preparation Code` initializes variables for each child element and the container, ensuring that they are available when the benchmark tests are executed.

The `Html Preparation Code` defines the HTML structure for the test, including the container and individual elements. This code is used by both test cases to establish a common baseline.

**Test Case Explanation**

Each test case executes a different approach for inserting multiple child elements into the container:

1.  **`append` Test**: Uses the `append` method on the container element, passing an array of child elements as arguments.
2.  **`appendChild` Test**: Uses the `appendChild` method on the container element, appending each child element individually.

The benchmark measures the performance (number of executions per second) for both test cases using different browsers and devices.

**Understanding Benchmark Results**

The latest benchmark results show the execution frequency (executions per second) for each test case across various browsers. The `append` method generally outperforms the `appendChild` approach, likely due to its batching mechanism.

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	113943.5 Ops/sec
appendChild	106550.2 Ops/sec

Related benchmarks:

JS: append vs appendChild multiple insert (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 25 days ago):