Benchmark: append + createTextNode vs appenChild

Script Preparation code:

var root = document.createElement("div");

var getRandomNumber = () => Math.floor(Math.random() * 10001);

var getText = () => `lorem ipsum ${getRandomNumber()} dolor sit amet`;

var max = 1000;

Tests:

appendChild + createTextNode
for (let i = 0; i < max; i++) { root.appendChild(document.createTextNode(getText())); }
append
for (let i = 0; i < max; i++) { root.append(getText()); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
appendChild + createTextNode
append

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark test case and explain what's being tested, compared options, pros and cons, and other considerations.

**Benchmark Test Case**

The benchmark tests two different approaches to appending text to an HTML element: `appendChild + createTextNode` and `append`. The test case is designed to measure which approach is faster.

**Script Preparation Code**

The script preparation code defines a few variables:
```javascript
var root = document.createElement("div");
var getRandomNumber = () => Math.floor(Math.random() * 10001);
var getText = () => `lorem ipsum ${getRandomNumber()} dolor sit amet`;
var max = 1000;
```
These variables are used to create a random text string (`getText`) and an array of maximum length `max`. The `root` variable is created as a new HTML `div` element.

**Html Preparation Code**

There is no html preparation code provided, which means that the benchmark only tests the JavaScript performance aspect and ignores any potential differences in HTML rendering or layout.

**Individual Test Cases**

The test case consists of two sub-cases:

1. **appendChild + createTextNode**
```javascript
for (let i = 0; i < max; i++) {
    root.appendChild(document.createTextNode(getText()));
}
```
This approach appends a `TextNode` object to the `root` element using `appendChild`. The `TextNode` object contains the text string generated by `getText`.

2. **append**
```javascript
for (let i = 0; i < max; i++) {
    root.append(getText());
}
```
This approach uses the new `append` method introduced in ECMAScript 2018, which allows appending a string to an element without creating a text node.

**Comparison of Approaches**

The benchmark compares these two approaches:

1. **appendChild + createTextNode**: This approach creates a separate `TextNode` object for each iteration, which can be slow due to the overhead of creating and disposing of objects.
2. **append**: This approach uses the new `append` method, which is designed to be faster and more efficient than appending individual text nodes.

**Pros and Cons**

1. **appendChild + createTextNode**:
	* Pros: More explicit control over rendering and layout, as each `TextNode` object can be styled independently.
	* Cons: Creates multiple objects, leading to slower performance and increased memory usage.
2. **append**:
	* Pros: Faster performance due to reduced overhead of creating objects, easier to read and maintain code.
	* Cons: Less explicit control over rendering and layout.

**Other Considerations**

1. **Browser Support**: Both approaches are supported by most modern browsers, including Firefox 117 used in this benchmark.
2. **DOM Updates**: The `append` method is optimized for updating the DOM, making it a good choice when working with large datasets or complex UIs.

In conclusion, the benchmark test case evaluates the performance of two different approaches to appending text to an HTML element: `appendChild + createTextNode` and `append`. While `append` offers faster performance and easier code maintenance, `appendChild + createTextNode` provides more explicit control over rendering and layout. The choice between these approaches depends on the specific use case and requirements.

**Alternative Approaches**

1. **innerHTML**: This approach appends text to an element using the `innerHTML` property. While it's easy to read and maintain, it can be slower due to the overhead of parsing HTML.
2. **textContent**: Similar to `innerHTML`, this approach uses the `textContent` property to append text to an element. It's generally faster than `innerHTML`, but may have rendering issues if used with certain types of content.

Note that these alternative approaches are not typically recommended for performance-critical code, as they can lead to slower execution times and increased memory usage.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/117.0

Browser/OS: Firefox 117 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
appendChild + createTextNode	2628.8 Ops/sec
append	4196.5 Ops/sec

Related benchmarks:

append + createTextNode vs appenChild (version: 0)

Comparing performance of: appendChild + createTextNode vs append

Created: one year ago by: Guest

Jump to the latest result

appendChild + createTextNode

append

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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