Benchmark: ParentNode.append() vs Node.appendChild() for adding a couple elements

ParentNode.append() vs Node.appendChild() for adding a couple elements (version: 0)

ParentNode.append() is more convenient. Is it also faster when needing to append several elements at once? https://developer.mozilla.org/en-US/docs/Web/API/Element/append https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

Comparing performance of: append() vs appendChild() vs append() with apply() vs appendChild() with loop

Created: 5 years ago by: Guest

Jump to the latest result

Script Preparation code:

var e1 = document.createElement('div');
var e2 = document.createElement('div');
var e3 = document.createElement('div');
var e4 = document.createElement('div');
var es = [e1, e2, e3, e4];

Tests:

append()
document.body.append(e1, e2, e3, e4);
appendChild()
document.body.appendChild(e1); document.body.appendChild(e2); document.body.appendChild(e3); document.body.appendChild(e4);
append() with apply()
document.body.append.apply(document.body, es);
appendChild() with loop
for (var i = 0; i < es.length; i++) document.body.appendChild(es[i]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append()
appendChild()
append() with apply()
appendChild() with loop

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/129.0.0.0 Safari/537.36

Browser/OS: Chrome 129 on Windows

View result in a separate tab

Test name	Executions per second
append()	531419.8 Ops/sec
appendChild()	565911.6 Ops/sec
append() with apply()	524588.2 Ops/sec
appendChild() with loop	483389.5 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 provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of two approaches for adding multiple elements to an HTML document:

1. `ParentNode.append()`
2. `Node.appendChild()` (with various iterations)

We'll explore each approach, its pros and cons, and other considerations.

**ParentNode.append()**

`ParentNode.append()` is a more convenient method for appending elements, as it takes advantage of the optimized internal node list implementation in modern browsers. This method allows for faster and more efficient append operations, especially when dealing with large numbers of elements.

Pros:

* Faster performance due to optimized internal node list
* More convenient syntax

Cons:

* Less control over the append operation (e.g., no explicit iteration)

**Node.appendChild()**

The `appendChild()` method is a standard JavaScript API for appending elements. It's widely supported across different browsers and versions.

Pros:

* Better control over the append operation (e.g., iterating through elements)
* Wide browser support

Cons:

* Less efficient performance compared to `ParentNode.append()`
* More verbose syntax

**Append() with apply()**

Using `apply()` on the `append()` method allows for more flexible and dynamic appending of multiple elements. This approach enables iteration over an array of elements, which can be useful in certain scenarios.

Pros:

* More control over the append operation (e.g., iterating through elements)
* Flexible syntax

Cons:

* Less efficient performance compared to `ParentNode.append()`
* Less convenient syntax

**Append() with loop**

Using a traditional `for` loop to iterate through an array of elements and call `appendChild()` on each element is another approach. This method provides more control over the append operation.

Pros:

* Better control over the append operation (e.g., iterating through elements)
* Flexible syntax

Cons:

* Less efficient performance compared to `ParentNode.append()`
* More verbose syntax

**Library**

The benchmark doesn't explicitly mention a specific library, but it does use the `document` object and its methods (`appendChild()` and `append()`). The `document` object is a built-in part of the HTML DOM (Document Object Model) in JavaScript.

**Special JS feature or syntax**

There are no special JavaScript features or syntaxes mentioned in this benchmark. However, modern browsers have implemented various features and APIs to improve performance, such as:

* WebAssembly
* WebGL
* Web Storage

These features might impact the performance of the benchmark results, but they are not directly related to the methods being compared.

**Alternatives**

For those interested in exploring alternative approaches or testing other methods, here are a few suggestions:

1. **Using `insertBefore()`**: Instead of appending elements, you could use `insertBefore()` to insert elements before an existing element.
2. **Using a different container element**: Experiment with using a different container element (e.g., `div` instead of `body`) and observe the performance differences.
3. **Increasing the number of elements**: Test the benchmark with larger arrays of elements to see how the performance changes.

Keep in mind that these alternatives might introduce additional complexity or variations in the results, so it's essential to carefully evaluate their impact on your specific use case.

Related benchmarks: