Benchmark: append vs innerHTML 2

HTML Preparation code:

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

Tests:

innerHTML a
document.getElementById('test').innerHTML = '' let newDiv = '<div id="testing">' for (i = 0; i < 1000; i++) { newDiv += '<div class="testClass">dsfdsffjkdf</div>' } newDiv += '</div>' document.getElementById('test').innerHTML = newDiv
innerHTML b
document.getElementById('test').innerHTML = '' let newDiv = '<div id="testing">' for (i = 0; i < 1000; i++) { newDiv += '<div class="testClass">dsfdsffjkdf</div>' } newDiv += '</div>' document.getElementById('test').innerHTML += newDiv
append
document.getElementById('test').innerHTML = '' const newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { const newElementPart = document.createElement("div"); newElementPart.id = i newElementPart.classList.add("testClass"); newElementPart.appendChild(document.createTextNode('dsfdsffjkdf')); newElement.appendChild(newElementPart); } document.getElementById("test").append(newElement);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML a
innerHTML b
append

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
innerHTML a	4410.1 Ops/sec
innerHTML b	4378.1 Ops/sec
append	1148.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmark test case on MeasureThat.net. The benchmark compares the performance of three different approaches: using `innerHTML` with concatenation, using `innerHTML` with appending, and using the `append()` method.

**Test Cases**

There are three individual test cases:

1. **`innerHTML a`**: This test case uses `innerHTML` to concatenate a string with 1000 iterations.
2. **`innerHTML b`**: This test case is similar to `innerHTML a`, but instead of assigning the result to `innerHTML`, it appends the new string to the existing `innerHTML`.
3. **`append`**: This test case creates an HTML element and appends 1000 child elements to it using the `append()` method.

**Options Compared**

The three test cases compare the performance of:

* Using `innerHTML` with concatenation (`innerHTML a`)
* Using `innerHTML` with appending (`innerHTML b`)
* Using the `append()` method (`append`)

**Pros and Cons of Each Approach**

1. **`innerHTML a`**:
	* Pros: Simple and widely supported.
	* Cons: Can be slow due to string concatenation, which creates a new string object on each iteration.
2. **`innerHTML b`**:
	* Pros: Reduces the number of DOM mutations compared to `innerHTML a`, which can improve performance.
	* Cons: Still uses `innerHTML`, which can lead to slower performance than using `append()` or creating elements directly.
3. **`append`**:
	* Pros: Fastest approach, as it only requires appending child elements without creating a new string object.
	* Cons: Requires creating an HTML element and its child elements, which can be more memory-intensive.

**Library Used**

There is no specific library used in these test cases. The benchmarking code uses native JavaScript features to compare the performance of different approaches.

**Special JS Features or Syntax**

None of the test cases use any special JavaScript features or syntax beyond standard ECMAScript syntax.

**Other Alternatives**

If you're looking for alternative approaches, consider the following:

* Using `innerHTML` with a template engine (e.g., Mustache) can improve performance by reducing the number of DOM mutations.
* Creating elements directly using `document.createElement()` and manipulating their properties can be faster than using `append()`.
* Using a library like jQuery or React can provide additional performance optimizations, but may also introduce additional overhead.

Keep in mind that the best approach depends on your specific use case and requirements. These benchmarks should serve as a general guideline for comparing different approaches.

Related benchmarks:

append vs innerHTML 2 (version: 0)

append vs innerHTML 2

Comparing performance of: innerHTML a vs innerHTML b vs append

Created: 3 years ago by: Guest

Jump to the latest result

innerHTML a

innerHTML b

append

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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