Benchmark: innerHTML appendChild

Script Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML +=
appendChild

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and test cases to explain what's being tested, compared, and considered.

**Benchmark Definition**

The benchmark is testing two different approaches to appending (adding) content to an HTML element using JavaScript:

1. `innerHTML +=`: This approach appends the HTML content to the end of the innerHTML property of the `box1` element.
2. `appendChild`: This approach uses the `appendChild` method to add a new child element (`box2`) to the `box1` element.

**Script Preparation Code**

The script preparation code creates two HTML elements, `box1` and `box2`, which will be used in the benchmark:

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

Here, we create an empty `div` element for `box1` and another empty `div` element for `box2`. The second line sets the innerHTML of `box2` to an empty string, which will be used in the benchmark.

**Html Preparation Code**

There is no HTML preparation code provided, so it's assumed that the HTML elements are created without any additional content or attributes.

**Test Cases**

The test cases compare the performance of the two approaches:

1. **innerHTML +=**: This test case runs a loop 1000 times, appending the `box2HTML` string to the innerHTML of `box1`.
```javascript
for(let i = 0; i < 1000; i++) {
    box1.innerHTML += box2HTML;
}
```

2. **appendChild**: This test case also runs a loop 1000 times, appending `box2` as a child element to `box1`.
```javascript
for(let i = 0; i < 1000; i++) {
    box1.appendChild(box2);
}
```

**Benchmark Results**

The latest benchmark results show the performance metrics for each test case:

| Test Name | RawUAString | Browser | DevicePlatform | OperatingSystem | ExecutionsPerSecond |
| --- | --- | --- | --- | --- | --- |
| innerHTML += | ... | Mobile Safari 16 | Mobile | iOS 16.0.2 | 5366.3232421875 |
| AppendChild | ... | Mobile Safari 16 | Mobile | iOS 16.0.2 | 4117.84130859375 |

The results show that `innerHTML +=` performs better than `appendChild` in this benchmark.

**Library and Special Features**

There is no external library used in the benchmark, so there are no additional dependencies to consider.

However, note that some JavaScript features like strict mode or let/catch blocks might be enabled by default in certain browsers or environments. Since these aren't mentioned explicitly, it's assumed they're not being used.

**Alternatives**

Some alternatives to benchmarking this specific scenario could include:

* Using a different HTML element, such as `span` or `p`, instead of `div`.
* Adding additional attributes or content to the `box1` and `box2` elements before the benchmark.
* Changing the number of iterations in the loop from 1000 to a higher or lower value.
* Testing with different browsers or environments, such as desktop Safari or Chrome.

Keep in mind that each alternative might affect the outcome of the benchmark and require adjustments to the script preparation code and test cases.

Related benchmarks:

innerHTML appendChild (version: 0)

Comparing performance of: innerHTML += vs appendChild

Created: 3 years ago by: Guest

Jump to the latest result

innerHTML +=

appendChild

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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