Benchmark: innerHTML vs append vs hybrid

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append
innerHTML
both

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
append	596.3 Ops/sec
innerHTML	1272.4 Ops/sec
both	619.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided benchmark.

**Benchmark Overview**

The benchmark compares the performance of three approaches for creating and manipulating HTML elements:

1. `innerHTML`
2. `append` (using `Document.append()` method)
3. Hybrid approach (not specified in the code, but implied by the name)

**Options Compared:**

* **innerHTML**: This approach involves setting the inner HTML of an existing element.
	+ Pros:
		- Simple and efficient for creating new elements with a small amount of content.
	+ Cons:
		- Can be slower for large amounts of data, as it requires parsing and concatenating strings.
* **append**: This approach involves using the `Document.append()` method to add one or more child nodes to an existing element.
	+ Pros:
		- Efficient for creating new elements with a large amount of content, as it avoids string parsing and concatenation.
	+ Cons:
		- Requires creating a separate DOM node for each element being appended, which can lead to memory fragmentation.
* Hybrid approach: This is not explicitly specified in the code, but based on the names of the test cases, it's likely that this approach involves using both `innerHTML` and `append` methods.

**Library Used**

In none of the provided benchmark definitions, a specific library is used. The benchmarks appear to be testing built-in browser functionality.

**Special JS Feature/Syntax**

None mentioned in the provided code.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are some options:

1. **textContent**: This approach involves setting the text content of an existing element.
2. **DOM manipulation libraries**: There are several JavaScript libraries available that provide more efficient and modern DOM manipulation APIs, such as jQuery or Velocity.js.
3. **Template engines**: You could also use a template engine like Handlebars or Mustache to generate HTML templates.

Keep in mind that these alternatives might not be directly comparable to the original benchmark, as they may involve different assumptions about your application's structure and requirements.

Related benchmarks:

innerHTML vs append vs hybrid (version: 0)

Comparing performance of: append vs innerHTML vs both

Created: 2 years ago by: Guest

Jump to the latest result

append

innerHTML

both

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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