Benchmark: JS: insertBefore vs appendChild vs prepend vs insertAdjacentElement

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

Historical Performance Data aggregated from 80 community runs

Desktop Results:

Chrome 56 runs

appendChild

2.0M/s

insertBefore

2.0M/s

insertAdjacentElement

1.9M/s

prepend

1.8M/s

Fastest: appendChild (1.2x faster)

View exact numbers

✓ appendChild: 2,035,246 ops/sec
• insertBefore: 2,026,518 ops/sec
• insertAdjacentElement: 1,851,382 ops/sec
• prepend: 1,759,052 ops/sec

Firefox 17 runs

appendChild

23K/s

insertAdjacentElement

20K/s

insertBefore

19K/s

prepend

16K/s

Fastest: appendChild (1.4x faster)

View exact numbers

✓ appendChild: 22,768 ops/sec
• insertAdjacentElement: 19,942 ops/sec
• insertBefore: 19,108 ops/sec
• prepend: 15,744 ops/sec

Safari 7 runs

appendChild

4.1M/s

insertBefore

4.0M/s

insertAdjacentElement

4.0M/s

prepend

3.7M/s

Fastest: appendChild (1.1x faster)

View exact numbers

✓ appendChild: 4,118,536 ops/sec
• insertBefore: 4,038,958 ops/sec
• insertAdjacentElement: 3,974,502 ops/sec
• prepend: 3,740,958 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
insertBefore
appendChild
prepend
insertAdjacentElement

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36 Edg/148.0.0.0

Browser/OS: Chrome 148 on Windows

View result in a separate tab

appendChild

1.2M/s

insertBefore

737K/s

prepend

312K/s

insertAdjacentElement

210K/s

View exact numbers

Test name	Executions per second
✓ appendChild	1,170,184 Ops/sec
insertBefore	736,837 Ops/sec
prepend	312,196 Ops/sec
insertAdjacentElement	210,410 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 JSON data and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark measures the performance of different approaches to insert an HTML element (`paragraph`) into a container element (`container`) on a web page. The approaches are:

1. `insertBefore`
2. `appendChild`
3. `prepend`
4. `insertAdjacentElement`

**Script Preparation Code and Html Preparation Code**

The script preparation code creates a variable `container` by selecting an HTML element with the id "container" from the document, and another variable `paragraph` by creating a new `<p>` HTML element.

The html preparation code creates a basic HTML structure containing a single `<div>` element with the id "container".

**Individual Test Cases**

Each test case defines a specific benchmarking scenario using one of the four approaches:

1. `insertBefore`: inserts the paragraph element after a specified index (in this case, null).
2. `appendChild`: appends the paragraph element to the end of the container.
3. `prepend`: prepends the paragraph element to the beginning of the container.
4. `insertAdjacentElement`: inserts the paragraph element at a specific position relative to the container's parent node (in this case, afterbegin).

**Library and Special JS Features**

There are no libraries used in this benchmarking framework.

**Options Compared**

The options compared are:

* `insertBefore` vs `appendChild` vs `prepend` vs `insertAdjacentElement`

Each of these approaches has its own characteristics:

* **Performance**: Generally, appending to the end of a container is faster than inserting at specific positions using `insertAdjacentElement`. Inserting before or prepending can be slower due to the need to navigate and potentially reorder elements.
* **Memory Allocation**: Some browsers might allocate more memory for containers with many elements inserted at specific positions (e.g., `insertAdjacentElement`).
* **Browser Support**: `insertAdjacentElement` is a relatively new feature, introduced in Chrome 83. Older browsers might not support it.

**Pros and Cons of Each Approach**

Here's a brief summary:

* `insertBefore`: Pros: more control over element ordering; Cons: potentially slower performance due to reordering.
* `appendChild`: Pros: faster performance, less memory allocation; Cons: limited control over element ordering.
* `prepend`: Similar to `insertBefore`, but prepends the element instead of inserting after.
* `insertAdjacentElement`: Pros: flexible positioning; Cons: relatively new feature, potentially slower performance, and more memory allocation.

**Other Alternatives**

If you need to insert elements into a container, consider using:

* `splice()`: A native JavaScript method that can be used with arrays or DOM elements. It's similar to `insertAdjacentElement` but provides more control.
* `DocumentFragment`: A lightweight element that allows appending multiple elements without triggering a reflow.

When choosing an approach, consider the specific requirements of your project, such as performance, memory allocation, and browser support.

In conclusion, this benchmarking framework helps compare the performance of different approaches to inserting HTML elements into containers. By understanding the pros and cons of each option, developers can make informed decisions about which method to use in their projects.

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

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

Created: 4 years ago by: Guest

Go to the latest result

insertBefore

appendChild

prepend

insertAdjacentElement

Historical Performance Data aggregated from 80 community runs

Desktop Results:

Chrome 56 runs

Firefox 17 runs

Safari 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Comparing performance of: insertBefore vs appendChild vs prepend vs insertAdjacentElement

Created: 4 years ago by: Guest

Go to the latest result

insertBefore

appendChild

prepend

insertAdjacentElement

Historical Performance Data aggregated from 80 community runs

Desktop Results:

Chrome 56 runs

Firefox 17 runs

Safari 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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