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

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 24 runs

insertAdjacentHTML

1K/s

append

459/s

Fastest: insertAdjacentHTML (2.2x faster)

View exact numbers

✓ insertAdjacentHTML: 1,029 ops/sec
• append: 459 ops/sec

Firefox 10 runs

insertAdjacentHTML

1K/s

append

746/s

Fastest: insertAdjacentHTML (1.7x faster)

View exact numbers

✓ insertAdjacentHTML: 1,233 ops/sec
• append: 746 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36 Edg/149.0.0.0

Browser/OS: Chrome 149 on Windows

View result in a separate tab

insertAdjacentHTML

2K/s

append

537/s

View exact numbers

Test name	Executions per second
✓ insertAdjacentHTML	1,534 Ops/sec
append	537 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

insertAdjacentHTML vs append (version: 0) Benchmark.js

Comparing performance of: `append vs insertAdjacentHTML`

Created: 5 years ago by: Guest

Go to the latest result

append

insertAdjacentHTML

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 24 runs

Firefox 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

insertAdjacentHTML vs append (version: 0) Benchmark.js

Comparing performance of: append vs insertAdjacentHTML

Created: 5 years ago by: Guest

Go to the latest result

append

insertAdjacentHTML

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 24 runs

Firefox 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `append vs insertAdjacentHTML`