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

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

Test name	Executions per second
insertBefore	4124.4 Ops/sec
append	1898.4 Ops/sec
prepend	3344.7 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.

Related benchmarks:

JS: insertBefore vs append vs prepend (version: 0)

Comparing performance of: insertBefore vs append vs prepend

Created: 4 years ago by: Guest

Jump to the latest result

insertBefore

append

prepend

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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