Benchmark: insertAdjacentHTML vs append

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);
insertAdjacentHTML
html = "<div id='testing'>" for (i = 0; i < 1000; i++) { html += "<div class='testClass'></div>"; } html += "</div>"; document.getElementById("test").insertAdjacentHTML("beforeend", html);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append
insertAdjacentHTML

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month 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
append	477.1 Ops/sec
insertAdjacentHTML	848.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided benchmark compares two approaches: `insertAdjacentHTML` and `append`. The goal is to determine which method is faster for creating and appending HTML elements in a loop.

**Options Compared**

The two options being compared are:

1. **`insertAdjacentHTML`**: This method inserts the specified HTML string before or after an element, without modifying the original element.
2. **`append`**: This method appends one or more child nodes to the end of an element.

**Pros and Cons**

* `insertAdjacentHTML`:
	+ Pros: Faster and more efficient for inserting large amounts of HTML data, as it avoids creating unnecessary DOM nodes.
	+ Cons: May require a larger memory allocation due to the creation of temporary HTML strings.
* `append`:
	+ Pros: More intuitive and easier to understand for developers familiar with traditional DOM manipulation methods.
	+ Cons: Can be slower and more inefficient, especially when dealing with large amounts of data.

**Library and Purpose**

In the provided benchmark, a library is not explicitly mentioned. However, it's likely that the `document.createElement` method is used to create new DOM elements.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes mentioned in this benchmark. The code uses standard JavaScript syntax and libraries.

**Alternative Approaches**

Other alternatives for creating and appending HTML elements might include:

* Using a templating engine like Handlebars or Pug
* Utilizing a library like React or Angular for building complex UI components
* Leveraging modern web development frameworks like Vue.js

**Benchmark Preparation Code**

The provided `Script Preparation Code` is empty, which means that no additional setup or initialization code is required before running the benchmark.

**Individual Test Cases**

There are two test cases:

1. **`append`**: This test case creates a new element and appends 1000 child elements using a loop.
2. **`insertAdjacentHTML`**: This test case creates an HTML string with 1000 child elements and inserts it before an element using `insertAdjacentHTML`.

**Latest Benchmark Result**

The provided benchmark result shows the execution per second for each test case, which indicates the speed at which each method can create and append HTML elements.

Related benchmarks:

insertAdjacentHTML vs append (version: 0)

Comparing performance of: append vs insertAdjacentHTML

Created: 3 years ago by: Guest

Jump to the latest result

append

insertAdjacentHTML

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