Benchmark: innerHTML vs appendChild

Script Preparation code:

 box1 = document.createElement("div");
 box2 = document.createElement("div");
 box2HTML = box2.innerHTML;

Tests:

appendchild
for(let i = 0; i < 10000; i++) { box1.appendChild(box2); }
innerHTML +=
for(let i = 0; i < 10000; i++) { box1.innerHTML += box2HTML; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
appendchild
innerHTML +=

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.0.1 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
appendchild	425.9 Ops/sec
innerHTML +=	95.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 the provided JSON benchmark definition and test cases.

**Benchmark Definition:**

MeasureThat.net is testing two different approaches to append or concatenate HTML content to an element:

1. `appendChild`: Using the `appendChild` method to add multiple HTML elements (`box2`) to another element (`box1`) in a loop.
2. `innerHTML +=`: Using the `innerHTML` property and concatenation operator (`+=`) to build a new HTML string by appending multiple HTML elements (`box2HTML`) to an existing string.

**Script Preparation Code:**

The script preparation code is used to create the necessary DOM elements:

* `box1 = document.createElement("div");`: Creates an empty `div` element and assigns it to the variable `box1`.
* `box2 = document.createElement("div");`: Creates another empty `div` element and assigns it to the variable `box2`.
* `box2HTML = box2.innerHTML;`: Sets the `innerHTML` property of `box2` (which is an empty string) to itself. This step is likely intended to set up some HTML content for the test.

**Html Preparation Code:**

The html preparation code is not provided, so we'll assume it's either:

* An empty string or a default value that doesn't affect the test.
* A specific HTML structure that only applies to one of the test cases.

**Options Compared:**

MeasureThat.net is comparing two options:

1. **Using `appendChild`**: Appending multiple elements to another element in a loop.
	+ Pros:
		- Can be more efficient for small datasets, as it avoids creating multiple strings.
	* Cons:
		- May lead to slower performance due to the overhead of creating and manipulating DOM elements in a loop.
2. **Using `innerHTML +=`**: Concatenating HTML content using the `innerHTML` property and concatenation operator (`+=`).
	+ Pros:
		- Can be faster for large datasets, as it avoids the overhead of creating multiple DOM elements.
	* Cons:
		- May lead to slower performance due to the creation of multiple temporary strings.

**Library:**

None mentioned in this specific benchmark definition. However, some JavaScript libraries like jQuery or React might use similar approaches or optimization techniques that could affect the results.

**Special JS Features/Syntax:**

There are no special features or syntax mentioned in this benchmark definition. It's standard JavaScript code with no advanced features like async/await, promises, or closures.

**Other Considerations:**

* Browser and device differences can impact performance.
* The size of the dataset (10000 iterations) might be too small to accurately represent real-world scenarios.
* The `innerHTML` property can lead to slower performance due to its parsing and concatenation requirements.

**Alternatives:**

If you're looking for alternatives to MeasureThat.net, consider:

1. jsPerf: A popular benchmarking tool specifically designed for JavaScript testing.
2. Benchmark.js: A lightweight library for creating benchmarks that works with various test runners.
3. WebPageTest: A comprehensive website performance testing tool that also includes benchmarking capabilities.

These tools and libraries can help you create and run more accurate and efficient JavaScript benchmarks, but MeasureThat.net's simplicity and ease of use make it a great starting point for most developers.

Related benchmarks:

innerHTML vs appendChild (version: 0)

Comparing performance of: appendchild vs innerHTML +=

Created: 3 years ago by: Guest

Jump to the latest result

appendchild

innerHTML +=

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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