Benchmark: JS: append vs appendChild multiple nodes (10000)

HTML Preparation code:

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

Script Preparation code:

var paragraphs = Array.from({length: 10000}, () => document.createElement("p"));
var container = document.getElementById("container");

Tests:

document.fragment
const fragment = new DocumentFragment(); for (let i = 0; i < paragraphs.length; i++) { fragment.append(paragraphs[i]); } container.append(fragment);
appendChild
for (let i = 0; i < paragraphs.length; i++) { container.appendChild(paragraphs[i]); }
append
container.append(...paragraphs);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
document.fragment
appendChild
append

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/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Browser/OS: Chrome 112 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
document.fragment	261.6 Ops/sec
appendChild	290.8 Ops/sec
append	325.9 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 explanation of the provided benchmark.

**Benchmark Definition**

The benchmark measures the performance difference between three approaches:

1.  **`append()`**: This method appends multiple nodes to an element without creating a new fragment.
2.  **`appendChild()`**: This method appends multiple nodes to an element, creating a new fragment if necessary.
3.  **`document.fragment`**: This approach creates a `DocumentFragment` object and appends all the nodes to it before appending the fragment to the element.

**Options Compared**

*   The main difference between these approaches is how they handle the creation of fragments. In the past, using `append()` was faster because it didn't create a new fragment. However, this approach had some drawbacks, such as not being compatible with older browsers and potentially causing issues with event listeners.
*   On the other hand, using `appendChild()` creates a new fragment automatically if multiple nodes are appended consecutively. This approach is more modern and generally safer but might be slower due to the creation of an additional fragment.

**Pros and Cons**

*   **`append()`**:
    *   Pros: Historically faster, compatible with older browsers.
    *   Cons: Not recommended due to potential compatibility issues and event listener problems.
*   **`appendChild()`**:
    *   Pros: Modern and safe approach, less compatibility issues.
    *   Cons: Might be slower due to the creation of a new fragment.

**Other Considerations**

When to use each approach:

*   Use `append()` when you need faster performance, but at the cost of potential compatibility issues. However, this is generally not recommended due to its limitations.
*   Use `appendChild()` as the standard approach in modern JavaScript development for its safety and compatibility benefits.

**Library**

The `DocumentFragment` object is a built-in part of the DOM API in modern browsers. It's used to group multiple elements together without creating additional DOM nodes, which can improve performance by reducing the number of nodes that need to be parsed and updated.

**Special JS Feature or Syntax**

This benchmark uses modern JavaScript features, specifically:

*   The `Array.from()` method: This method creates a new array from an iterable source. In this case, it's used to create an array of 10,000 HTML elements.
*   Template literals (`\r\n` and `\r\n`): These are used for readability and to separate code blocks in the benchmark definition.

In summary, the `append()` vs `appendChild` benchmark measures the performance difference between these two approaches when appending multiple nodes to an element. The `document.fragment` approach creates a new fragment object and appends all nodes to it before appending the fragment to the element.

Related benchmarks:

JS: append vs appendChild multiple nodes (10000) (version: 0)

Comparing performance of: document.fragment vs appendChild vs append

Created: one year ago by: Guest

Jump to the latest result

document.fragment

appendChild

append

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