Benchmark: insertAdjacentHTML with outerHTML vs append with CloneNode vs appendChild

HTML Preparation code:

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

Tests:

append
var newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.append(newElementPart); } document.getElementById("test").append(newElement.cloneNode(true));
insertAdjacentHTML
var newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.append(newElementPart); } document.getElementById("test").insertAdjacentHTML("beforeend", newElement.outerHTML);
appendChild
var newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.append(newElementPart); } document.getElementById("test").appendChild(newElement.cloneNode(true));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append
insertAdjacentHTML
appendChild

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
append	476.2 Ops/sec
insertAdjacentHTML	447.1 Ops/sec
appendChild	447.4 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 and its test cases.

**Benchmark Definition**

The benchmark is defined as a JSON object with three properties:

* `Name`: The name of the benchmark, which in this case is "insertAdjacentHTML with outerHTML vs append with CloneNode vs appendChild".
* `Description`: An empty string, indicating that no additional description is provided for this benchmark.
* `Script Preparation Code` and `Html Preparation Code`: These properties are not used in this benchmark.

The HTML preparation code is a simple `<div>` element with an ID of "test".

**Test Cases**

There are three test cases defined:

1. **append**
	* The script preparation code creates a new `div` element, sets its `id` attribute, and appends 1000 instances of another `div` element to it.
	* The `append` method is used to add the cloned node (`newElement.cloneNode(true)`) to the `test` element using `document.getElementById("test").append()`.
2. **insertAdjacentHTML**
	* The script preparation code creates a new `div` element, sets its `id` attribute, and appends 1000 instances of another `div` element to it.
	* The `insertAdjacentHTML` method is used with the `beforeend` argument to insert the outer HTML of the cloned node (`newElement.outerHTML`) into the `test` element using `document.getElementById("test").insertAdjacentHTML("beforeend", newElement.outerHTML)`.
3. **appendChild**
	* The script preparation code creates a new `div` element, sets its `id` attribute, and appends 1000 instances of another `div` element to it.
	* The `appendChild` method is used to add the cloned node (`newElement.cloneNode(true)`) to the `test` element using `document.getElementById("test").appendChild()`.

**Options Compared**

The three test cases compare the performance of:

1. `append`: Using the `append` method to add nodes to an element.
2. `insertAdjacentHTML`: Using the `insertAdjacentHTML` method with the `beforeend` argument to insert HTML into an element.
3. `appendChild`: Using the `appendChild` method to add nodes to an element.

**Pros and Cons of Each Approach**

1. **append**
	* Pros:
		+ Simple and straightforward.
		+ Works well for adding multiple nodes to an element in a single operation.
	* Cons:
		+ Can be slower than other methods due to the need to traverse the DOM tree when inserting new nodes.
2. **insertAdjacentHTML**
	* Pros:
		+ Faster than `append` because it allows for more direct manipulation of the DOM tree.
		+ Supports a wide range of HTML elements and attributes.
	* Cons:
		+ Can be less intuitive to use, especially for complex HTML structures.
3. **appendChild**
	* Pros:
		+ Similar performance characteristics to `insertAdjacentHTML`.
		+ Easier to understand and implement than `insertAdjacentHTML`.
	* Cons:
		+ Less flexible than `insertAdjacentHTML`.

**Library: CloneNode**

The `CloneNode` method is used in all three test cases. It creates a shallow copy of the original element, allowing for efficient manipulation of node contents.

**Special JS Feature/Syntax**

None mentioned.

Related benchmarks:

insertAdjacentHTML with outerHTML vs append with CloneNode vs appendChild (version: 0)

Comparing performance of: append vs insertAdjacentHTML vs appendChild

Created: 4 years ago by: Guest

Jump to the latest result

append

insertAdjacentHTML

appendChild

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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