Benchmark: insertAdjacentHTML vs appendchild vs append(2)

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
insertAdjacentHTML
appendchild
append

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.

Let's break down the provided benchmark and explain what is being tested, compared options, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark measures the performance of three different approaches for adding HTML elements to an existing DOM:

1. `insertAdjacentHTML`: Inserts HTML into a parent element.
2. `appendChild` (with `appendChild` method): Adds one or more child nodes to the end of an element.
3. `append`: A shorthand for `appendChild` with only two arguments, used to add a single element.

**Options Comparison**

The three options are compared in terms of their performance on modern web browsers, specifically Firefox 103 on Windows Desktop.

Here's what's being tested:

* How fast each approach can execute the same number of iterations (30 times) of adding HTML elements to the DOM.
* The execution speed is measured in executions per second (ExecutionsPerSecond).

**Pros and Cons**

1. **insertAdjacentHTML**:
	* Pros: More concise and expressive, doesn't require creating intermediate nodes.
	* Cons: May incur additional overhead due to the complexity of its implementation.
2. **appendChild** (with `appendChild` method):
	* Pros: Well-established and widely supported, easy to use for adding multiple elements.
	* Cons: May lead to slower performance compared to a single-element append.
3. **append**:
	* Pros: Shorthand for `appendChild`, makes it easier to add a single element.
	* Cons: Still requires creating an intermediate node, which can be slower.

**Library and Syntax Considerations**

None of the options rely on external libraries. The `insertAdjacentHTML` method is part of the DOM API, while `appendChild` and its shorthand `append` are also standard methods in modern JavaScript.

However, it's worth noting that some modern browsers might provide additional features or optimizations for these methods, such as:

* For `insertAdjacentHTML`, some browsers like Chrome provide a more efficient implementation for inserting large amounts of content.
* For `appendChild`, some engines (like V8 in Chrome) use a technique called "batching" to reduce the overhead of multiple appends.

**Special JavaScript Features or Syntax**

None of the options rely on special JavaScript features or syntax. They are all standard DOM API methods.

**Other Alternatives**

While not part of this benchmark, other approaches for adding HTML elements to the DOM might include:

* Using `createElement` and setting its attributes directly.
* Using a library like jQuery (now deprecated) that provides an easy-to-use interface for DOM manipulation.
* Using a templating engine or a virtual DOM library like React or Vue.js.

However, these alternatives are not part of this specific benchmark, which focuses on the performance comparison between three standard methods.

Related benchmarks:

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

Comparing performance of: insertAdjacentHTML vs appendchild vs append

Created: 3 years ago by: Guest

Jump to the latest result

insertAdjacentHTML

appendchild

append

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