Benchmark: JS: insertBefore vs append vs prepend

HTML Preparation code:

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

Script Preparation code:

var container = document.getElementById("container");
var paragraphs = new Array( 100 ).fill( 'p' );

Tests:

insertBefore
paragraphs.forEach( p => container.insertBefore( document.createElement( p ), null ) );
append
container.append( ...paragraphs.map( p => document.createElement( p ) ) );
prepend
paragraphs.forEach( p => container.prepend( document.createElement( p ) ) );

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

append

8K/s

insertBefore

8K/s

prepend

3K/s

Fastest: append (2.4x faster)

View exact numbers

✓ append: 8,410 ops/sec
• insertBefore: 8,389 ops/sec
• prepend: 3,493 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
append
prepend

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Browser/OS: Chrome 144 on Linux

View result in a separate tab

insertBefore

4K/s

prepend

3K/s

append

2K/s

View exact numbers

Test name	Executions per second
✓ insertBefore	4,124 Ops/sec
prepend	3,345 Ops/sec
append	1,898 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 benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is designed to compare the performance of three different methods for inserting or appending DOM elements to an HTML container: `insertBefore`, `append`, and `prepend`.

**Script Preparation Code**

The script preparation code creates a variable `container` that references an HTML element with the id "container". It also creates an array of 100 strings, each representing a paragraph (`"p"`).

**Html Preparation Code**

The HTML preparation code includes a simple `<div>` element with the id "container", which will serve as the target container for the DOM elements.

**Individual Test Cases**

Each test case has a unique benchmark definition that executes one of the three methods:

1. `insertBefore`: This method inserts each paragraph element at the beginning of the container, using `document.createElement` to create new elements.
2. `append`: This method appends each paragraph element to the end of the container, again using `document.createElement`.
3. `prepend`: This method prepends (or inserts) each paragraph element at the beginning of the container, similar to `insertBefore`.

**Library Used**

None, this benchmark only uses native JavaScript and DOM APIs.

**Special JS Features/Syntax**

There are no special JavaScript features or syntax used in these test cases. They rely solely on standard JavaScript and DOM methods.

**Pros and Cons of Different Approaches**

Here's a brief analysis of the pros and cons of each approach:

* `insertBefore`:
	+ Pros: Can be more efficient for inserting elements at specific positions, as it allows for more fine-grained control.
	+ Cons: May require more overhead due to the need to traverse the DOM tree to find the correct position.
* `append`:
	+ Pros: Simple and straightforward, with minimal overhead.
	+ Cons: Can be less efficient for large datasets, as it requires creating multiple elements and appending them all at once.
* `prepend`:
	+ Pros: Similar to `insertBefore`, but may offer better performance due to the use of a single operation instead of multiple insertions.
	+ Cons: Requires more complex logic to handle edge cases (e.g., inserting an element before another).

**Other Alternatives**

In this specific benchmark, there aren't many alternative approaches to consider. However, if you were to extend this benchmark to include other DOM insertion methods, some alternatives might include:

* `innerHTML`: Inserting HTML content directly into the container.
* `appendChild` with a template string or fragment: Using a template string or fragment to create multiple elements at once.

Keep in mind that these alternative approaches may introduce additional complexity and variations in performance, so it's essential to test them thoroughly to ensure accurate results.

JS: insertBefore vs append vs prepend (version: 0) Benchmark.js

Comparing performance of: `insertBefore vs append vs prepend`

Created: 4 years ago by: Guest

Go to the latest result

insertBefore

append

prepend

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 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 append vs prepend (version: 0) Benchmark.js

Comparing performance of: insertBefore vs append vs prepend

Created: 4 years ago by: Guest

Go to the latest result

insertBefore

append

prepend

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 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 append vs prepend`