Benchmark: JS: insertBefore vs appendChild vs prepend vs insertAdjacentElement vs after

HTML Preparation code:

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

Script Preparation code:

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

Tests:

insertBefore
container.insertBefore(paragraph, null);
appendChild
container.appendChild(paragraph);
prepend
container.prepend(paragraph);
insertAdjacentElement
container.insertAdjacentElement('afterbegin', paragraph);
after
container.after(paragraph);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
insertBefore
appendChild
prepend
insertAdjacentElement
after

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

Browser/OS: Chrome 112 on Windows

View result in a separate tab

Test name	Executions per second
insertBefore	1615875.8 Ops/sec
appendChild	1706852.1 Ops/sec
prepend	1417517.6 Ops/sec
insertAdjacentElement	1547539.8 Ops/sec
after	1570006.6 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 world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark tests the performance of different methods for inserting or prepending elements to an HTML container in a document. The methods being tested are:

1. `insertBefore`: Inserting an element before another existing element.
2. `appendChild`: Appending an element to the end of the container.
3. `prepend`: Prepending an element to the beginning of the container.
4. `insertAdjacentElement`: Inserting an element adjacent to the given position (in this case, afterbegin).
5. `after`: Using the `after` method provided by some JavaScript libraries (not part of the standard DOM API).

**Benchmark Preparation Code**

The preparation code creates a container element and a paragraph element using `document.createElement`. The container is then retrieved using `document.getElementById`.

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

**Html Preparation Code**

The HTML preparation code defines a container element with an ID of "container".

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

**Test Cases**

Each test case is defined by a `BenchmarkDefinition` string, which specifies the method to be tested. The `TestName` field provides a human-readable name for each test case.

The individual test cases are:

1. Inserting an element before another existing element (`insertBefore`)
2. Appending an element to the end of the container (`appendChild`)
3. Prepending an element to the beginning of the container (`prepend`)
4. Inserting an element adjacent to a given position (afterbegin) (`insertAdjacentElement`)
5. Using the `after` method provided by some JavaScript libraries (`after`)

**Browser and Platform Information**

The latest benchmark result shows performance data for Chrome 112 on a Windows desktop platform.

**Options Being Compared**

In this benchmark, we have two main options:

1. **DOM API Methods**: The methods being tested are part of the standard DOM API: `insertBefore`, `appendChild`, `prepend`, and `after`.
2. **InsertAdjacentElement**: This method is not part of the standard DOM API but is provided by some JavaScript libraries.

**Pros and Cons**

Here's a brief overview of the pros and cons for each option:

1. **DOM API Methods (insertBefore, appendChild, prepend)**:
	* Pros: Native to the DOM API, widely supported.
	* Cons: May have varying performance depending on browser implementation.
2. **DOM API Method (after)**:
	* Pros: Part of the standard DOM API, widely supported.
	* Cons: Not as widely used as other methods, may not be optimized for performance.
3. **InsertAdjacentElement**:
	* Pros: Native to modern web APIs, optimized for performance.
	* Cons: Not part of the standard DOM API, may require additional library support.

**Library Used (after)**

The `after` method is provided by some JavaScript libraries, such as jQuery. The exact implementation and performance characteristics of this method can vary depending on the specific library used.

**Special JS Feature or Syntax**

None mentioned in the provided benchmark information.

**Alternatives**

Other alternatives to these methods include:

1. **QuerySelectorAll**: Can be used to select elements using a CSS selector, which may provide similar results to `insertBefore` and `appendChild`.
2. **MutationObserver**: Can be used to observe changes to the DOM, which may provide similar results to `insertAdjacentElement`.
3. **custom implementations**: Depending on the specific requirements of your project, you may need to implement a custom solution using other methods or techniques.

Keep in mind that these alternatives may have different performance characteristics and use cases compared to the methods being tested in this benchmark.

Related benchmarks:

JS: insertBefore vs appendChild vs prepend vs insertAdjacentElement vs after (version: 0)

Comparing performance of: insertBefore vs appendChild vs prepend vs insertAdjacentElement vs after

Created: 2 years ago by: Guest

Jump to the latest result

insertBefore

appendChild

prepend

insertAdjacentElement

after

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