Benchmark: Move Element to another 2

HTML Preparation code:

<table class="new">
	<tbody>
		<tr class="new-tr">
		</tr>
	</tbody>
</table>

Script Preparation code:

var table_new_tr = document.getElementsByClassName('new-tr')[0];
var createElement = (() => {
    const tempDiv = document.createElement('div');

    return htmlString => {
        tempDiv.innerHTML = htmlString.trim();
        return tempDiv.removeChild(tempDiv.firstChild);
    };
})();

Tests:

innerHTML
table_new_tr.innerHTML = '<div>el</div>';
appendChild
table_new_tr.appendChild(createElement('<div>el</div>'));
insertAdjacentElement
table_new_tr.insertAdjacentElement('beforeend', createElement('<div>el</div>'));
insertAdjacentHTML (remove)
table_new_tr.insertAdjacentHTML('beforeend', '<div>el</div>');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
appendChild
insertAdjacentElement
insertAdjacentHTML (remove)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Browser/OS: Chrome 102 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
innerHTML	143333.0 Ops/sec
appendChild	163982.5 Ops/sec
insertAdjacentElement	96228.8 Ops/sec
insertAdjacentHTML (remove)	142829.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is defined in two parts: Script Preparation Code and Html Preparation Code.

Script Preparation Code:
```javascript
var table_new_tr = document.getElementsByClassName('new-tr')[0];
var createElement = (() => {
  const tempDiv = document.createElement('div');

return htmlString => {
    tempDiv.innerHTML = htmlString.trim();
    return tempDiv.removeChild(tempDiv.firstChild);
  };
})();
```
This code defines a function `createElement` that takes an HTML string, creates a temporary `<div>` element, sets its innerHTML to the input string, trims any whitespace, and then removes the first child node (which is likely the created `<div>`). The function is immediately invoked using an IIFE (Immediately Invoked Function Expression).

Html Preparation Code:
```html
<table class="new">
  <tbody>
    <tr class="new-tr"></tr>
  </tbody>
</table>
```
This code creates a basic HTML table structure with a single row (`<tr>`) inside the `<tbody>` element. The `table_new_tr` variable will refer to this row.

**Individual Test Cases**

The benchmark consists of four test cases, each defining a different operation:

1. **innerHTML**: `table_new_tr.innerHTML = '<div>el</div>'`;
	* This test case simply sets the innerHTML of the `table_new_tr` element to a string containing a single `<div>` element.
2. **appendChild**: `table_new_tr.appendChild(createElement('<div>el</div>'));`
	* This test case appends the created HTML element (`createElement`) to the end of the `table_new_tr` element using the `appendChild()` method.
3. **insertAdjacentElement**: `table_new_tr.insertAdjacentElement('beforeend', createElement('<div>el</div>'));`
	* This test case inserts the created HTML element (`createElement`) before the end of the `table_new_tr` element using the `insertAdjacentElement()` method with a "beforeend" insertion point.
4. **insertAdjacentHTML (remove)**: `table_new_tr.insertAdjacentHTML('beforeend', '<div>el</div>');`
	* This test case inserts an HTML string directly into the `table_new_tr` element, without creating a new element. The string contains a single `<div>` element.

**Options being compared**

The benchmark compares the performance of each test case across different browsers and devices. Specifically:

* Browser: Chrome 102
* DevicePlatform: Desktop (Mac OS X 10.14.6)
* OperatingSystem: Mac OS X 10.14.6

**Pros and Cons of different approaches**

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

1. **innerHTML**: Fastest, but may lead to DOM mutations if not properly handled.
2. **appendChild**: Generally slower than `innerHTML`, but can be more efficient for larger HTML structures.
3. **insertAdjacentElement**: Slower than `innerHTML` or `appendChild`, but provides a more precise insertion point and allows for better control over the DOM structure.
4. **insertAdjacentHTML (remove)**: Fastest, as it doesn't require creating an element and then appending it to the DOM.

**Library and syntax**

The benchmark uses a custom function `createElement` that creates a temporary `<div>` element using `document.createElement()`. This library is not a standard JavaScript library but rather a helper function defined within the benchmark script. The `htmlString => { ... }` syntax is a shorthand for a callback function, which is a common pattern in modern JavaScript.

**Special JS feature or syntax**

There are no special JS features or syntax used in this benchmark beyond what's described above.

**Alternatives**

Other alternatives to these approaches include:

* Using `document.querySelector()` and `element.insertAdjacentHTML()` instead of `insertAdjacentElement()`.
* Utilizing a library like jQuery, which provides a more concise way to manipulate the DOM using `$()`.
* Employing a virtual DOM library like React or Virtual DOM, which abstracts away the underlying DOM manipulations.

Keep in mind that this benchmark is focused on comparing the performance of different DOM manipulation approaches and may not be representative of real-world usage scenarios.

Related benchmarks:

Move Element to another 2 (version: 0)

Comparing performance of: innerHTML vs appendChild vs insertAdjacentElement vs insertAdjacentHTML (remove)

Created: 4 years ago by: Registered User

Jump to the latest result

innerHTML

appendChild

insertAdjacentElement

insertAdjacentHTML (remove)

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