Benchmark: insertAdjacentHTML vs appendchild vs append(3)

HTML Preparation code:

<div id="case"></div>

Tests:

insertAdjacentHTML
const cont = document.querySelector("#case"); const testNodeHtml = '<a class="pics__item js-pics__item js-pics__item_empty"><img alt="" class="pics__image js-pics__image" src="" ><div class="pics__panel"><h2 class="pics__title"></h2><p class="pics__text"></p></div></a>' let newElement = ''; for (i = 0; i < 30; i++) { newElement += testNodeHtml; } cont.insertAdjacentHTML("beforeend", newElement);
appendchild
const item = document.createElement('a'); const image = document.createElement('img'); const panel = document.createElement('div'); const title = document.createElement('h2'); const text = document.createElement('p'); item.className = 'pics__item js-pics__item pics__item_empty js-pics__item_empty'; image.className = 'pics__image js-pics__image'; panel.className = 'pics__panel'; title.className = 'pics__title js-pics__title'; text.className = 'pics__text js-pics__text'; panel.append(title, text); item.append(image, panel); const testNode = item; const cont = document.querySelector("#case"); for (i = 0; i < 30; i++) { cont.appendChild(testNode) }
append
const item = document.createElement('a'); const image = document.createElement('img'); const panel = document.createElement('div'); const title = document.createElement('h2'); const text = document.createElement('p'); item.className = 'pics__item js-pics__item pics__item_empty js-pics__item_empty'; image.className = 'pics__image js-pics__image'; panel.className = 'pics__panel'; title.className = 'pics__title js-pics__title'; text.className = 'pics__text js-pics__text'; panel.append(title, text); item.append(image, panel); const testNode = item; const cont = document.querySelector("#case"); for (i = 0; i < 30; i++) { cont.append(testNode) }
insertAdjacentHTML [separately]
const cont = document.querySelector("#case"); const testNodeHtml = '<a class="pics__item js-pics__item js-pics__item_empty"><img alt="" class="pics__image js-pics__image" src="" ><div class="pics__panel"><h2 class="pics__title"></h2><p class="pics__text"></p></div></a>' let newElement = ''; for (i = 0; i < 30; i++) { cont.insertAdjacentHTML("beforeend", testNodeHtml); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
insertAdjacentHTML
appendchild
append
insertAdjacentHTML [separately]

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches to appending or inserting HTML elements into a DOM is crucial for optimizing website loading times and user experience.

**What are we comparing?**

We have four test cases:

1. `insertAdjacentHTML`: This method inserts a string of HTML into a document, without parsing it first.
2. `appendChild`: This method appends a child element to another element in the DOM.
3. `append` (aliased as `appendChild`): This is likely a typo or shorthand for `appendChild`, and serves the same purpose.
4. `insertAdjacentHTML [separately]`: This method inserts a string of HTML into a document, without parsing it first, but is used separately (i.e., not in a loop).

**Options compared:**

* Insertion methods: `insertAdjacentHTML` vs `appendChild`
* Parse vs no-parse approach: `insertAdjacentHTML [separately]` vs `insertAdjacentHTML`

**Pros and Cons of each approach:**

1. **InsertAdjacentHTML**: Pros:
	* Faster, since it doesn't require parsing the HTML string.
	* Can be more efficient for large datasets, as it avoids creating multiple DOM nodes.
2. **AppendChild**: Pros:
	* Widely supported and well-established method.
	* Allows for easier manipulation of child elements.
3. **Append** (aliased as `AppendChild`): Cons: This option is likely a typo or shorthand for `appendChild`, and doesn't offer any additional benefits.

1. **InsertAdjacentHTML [separately]**: Pros:
	* Avoids the overhead of parsing the HTML string, which can be beneficial for large datasets.
	* Can provide better performance in certain cases, since it uses a separate execution context.
2. **InsertAdjacentHTML**: Cons:
	* Requires parsing the HTML string, which can introduce overhead.

**Other considerations:**

* The choice of insertion method ultimately depends on the specific use case and requirements.
* If you need to manipulate child elements or update their properties frequently, `appendChild` might be a better option.
* If you're working with large datasets or need optimal performance for page loading times, `insertAdjacentHTML` or `insertAdjacentHTML [separately]` could be a better choice.

**Library and syntax:**

In this benchmark, the `append`, `appendChild`, and `insertAdjacentHTML` methods are built-in DOM APIs. The `insertAdjacentHtml` method with brackets ( `[separately]` ) is also a built-in DOM API.

There are no special JavaScript features or syntax used in these benchmarks, other than possibly assuming familiarity with modern web development practices.

Related benchmarks:

insertAdjacentHTML vs appendchild vs append(3) (version: 0)

Comparing performance of: insertAdjacentHTML vs appendchild vs append vs insertAdjacentHTML [separately]

Created: 3 years ago by: Guest

Jump to the latest result

insertAdjacentHTML

appendchild

append

insertAdjacentHTML [separately]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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