Benchmark: textContent vs append v11

HTML Preparation code:

<div id='one'></div>

Tests:

append
let theDiv = document.getElementById('one'), theDivText = document.createTextNode("one"); theDiv.textContent = ''; theDiv.append(theDivText);
textContent
let theDiv = document.getElementById('one'), theDivText = document.createTextNode("one"); theDiv.textContent = ''; theDiv.textContent = 'one';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append
textContent

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0

Browser/OS: Firefox 134 on Windows

View result in a separate tab

Test name	Executions per second
append	341730.2 Ops/sec
textContent	265581.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of MeasureThat.net and analyze the provided benchmark.

**What is tested?**

The provided benchmark tests two different approaches to update the text content of an HTML element: `textContent` and `append`. The test creates an HTML element, appends a new text node to it using either method, and then clears the original text content before measuring the execution time for each approach.

**Options compared**

Two options are being compared:

1. **textContent**: This method updates the text content of the element by assigning a new string value to `textContent`. It is an HTML5 feature that allows updating the innerHTML of an element without having to parse or manipulate its structure.
2. **append**: This method appends a new child node to the element's children, effectively adding a new text node to the end of the element's content.

**Pros and cons**

**textContent**

Pros:

* Faster execution time: `textContent` updates the innerHTML of an element, which is a single operation in the DOM. It also doesn't require parsing or manipulating the element's structure.
* More efficient: Updating the text content directly affects the rendered HTML, reducing the number of DOM operations required.

Cons:

* Less intuitive for some developers: Some might find it harder to understand why updating `textContent` is faster than using `append`.

**append**

Pros:

* More explicit: Appending a new child node provides a clear understanding of what's being added to the element.
* Flexibility: This approach allows developers to add multiple child nodes if needed.

Cons:

* Slower execution time: Updating the DOM structure by appending a new child node can lead to slower performance compared to `textContent`.
* More complex: Updating the child nodes requires more parsing and manipulation of the DOM structure.

**Library usage**

In this benchmark, none of the libraries are explicitly mentioned. However, it's likely that MeasureThat.net uses internal JavaScript libraries or implementations for the browser engines being tested (e.g., Blink for Chrome).

**Special JS features or syntax**

There is no special JavaScript feature or syntax used in this benchmark other than the `textContent` and `append` methods themselves.

**Other alternatives**

While not explicitly mentioned, other approaches to update element text content could be:

* Using a library like jQuery or a custom implementation of `innerHTML`.
* Creating a new text node using `document.createTextNode()` and updating its parent's child nodes.
* Using a templating engine like Handlebars or Mustache.

Keep in mind that these alternatives might have different performance characteristics, and the specific use case may influence the choice of approach.

Related benchmarks:

textContent vs append v11 (version: 0)

Comparing performance of: append vs textContent

Created: 2 years ago by: Guest

Jump to the latest result

append

textContent

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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