Benchmark: insertAdjacentHTML vs insertBefore

HTML Preparation code:

<div id="test"></div>

Script Preparation code:

function randomElement(parent) {
  const index = Math.floor(Math.random() * parent.children.length);
  return parent.children[index];
}
var count = 1000;

Tests:

insertBefore
var newElement = document.createElement("div"); newElement.append(document.createElement("div")); for (i = 0; i < count; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.insertBefore(newElementPart, randomElement(newElement)); } document.getElementById("test").append(newElement);
insertAdjacentHTML
var newElement = document.createElement("div"); newElement.append(document.createElement("div")); for (i = 0; i < count; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); randomElement(newElement).insertAdjacentHTML("beforebegin",newElementPart); } document.getElementById("test").append(newElement);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
insertBefore
insertAdjacentHTML

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
insertBefore	269.1 Ops/sec
insertAdjacentHTML	477.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 provided benchmark definition and test cases to understand what is being tested.

**Benchmark Definition**

The benchmark compares the performance of two approaches: `insertAdjacentHTML` and `insertBefore`. The script preparation code generates a random element using the `randomElement` function, which returns a child element of the parent element. The HTML preparation code creates a simple HTML structure with an empty div element.

**Script Preparation Code**

The `randomElement` function returns a child element of the parent element by generating a random index between 0 and the length of the parent's children array:
```javascript
function randomElement(parent) {
  const index = Math.floor(Math.random() * parent.children.length);
  return parent.children[index];
}
```
This function is used to insert the generated random element into the parent element during the benchmark test.

**Html Preparation Code**

The HTML preparation code creates a simple HTML structure with an empty div element:
```html
<div id="test"></div>
```
This div element will be appended with the results of the benchmark test.

**Individual Test Cases**

There are two individual test cases:

1. **insertBefore**

This test case uses the `insertBefore` method to append a new element (`newElementPart`) before the randomly selected child element returned by the `randomElement` function:
```javascript
newElementPart.classList.add("testClass");
newElement.insertBefore(newElementPart, randomElement(newElement));
```
2. **insertAdjacentHTML**

This test case uses the `insertAdjacentHTML` method with the `beforebegin` position to append a new element (`newElementPart`) before the randomly selected child element returned by the `randomElement` function:
```javascript
randomElement(newElement).insertAdjacentHTML("beforebegin", newElementPart);
```
**Library and Purpose**

Neither of these test cases uses any external libraries. They rely on built-in JavaScript DOM methods.

**Special JS Feature or Syntax**

There are no special JS features or syntax used in these test cases beyond the standard `insertBefore` and `insertAdjacentHTML` methods.

**Pros and Cons of Approaches**

1. **insertBefore**
	* Pros:
		+ Can be faster for larger datasets, as it only requires a single DOM update.
	* Cons:
		+ May be slower for smaller datasets, due to the need to iterate over child elements to find the insertion point.
2. **insertAdjacentHTML**
	* Pros:
		+ More convenient and efficient for appending new elements, especially when working with larger datasets.
	* Cons:
		+ May require more overhead for parsing and rendering HTML content.

**Other Alternatives**

Some alternative approaches could include:

1. Using `appendChild` instead of `insertAdjacentHTML`, which would require a single DOM update but may be slower due to the need to parse and render HTML content.
2. Using a library like jQuery, which provides an equivalent method (`append`) for appending new elements.

Keep in mind that these alternatives are not included in the provided benchmark test cases.

Related benchmarks:

insertAdjacentHTML vs insertBefore (version: 0)

Comparing performance of: insertBefore vs insertAdjacentHTML

Comparing performance of: insertBefore vs insertAdjacentHTML

Created: 3 years ago by: Guest

Jump to the latest result

insertBefore

insertAdjacentHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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