Benchmark: innerText vs append v6

HTML Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerText
append

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Linux

View result in a separate tab

Test name	Executions per second
innerText	350469.4 Ops/sec
append	249167.9 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 benchmark and explain what is being tested, the options compared, their pros and cons, and other considerations.

**Benchmark Description**

The benchmark measures the performance difference between two approaches to set the text content of an HTML element:

1. Using `innerText` (setting the inner text directly)
2. Using `append` with a `textContent` property to set the entire content of the element

**Options Compared**

The two options being compared are:

* `innerText`: setting the inner text directly using `theDiv.innerText = "one"`
* `append`: creating a text node, appending it to the element's contents, and then setting the element's `textContent` property.

**Pros and Cons of Each Approach**

**innerText:**

Pros:

* Faster, as it only updates the existing text content
* Less memory allocation and garbage collection needed

Cons:

* May not update the element's content tree or layout, potentially causing issues with layout or event handling

**append:**

Pros:

* Updates the entire content of the element, including its children, which may be necessary for certain layouts or events
* Can be more flexible in terms of controlling the output text

Cons:

* Slower, as it involves creating a new text node and updating the element's contents
* More memory allocation and garbage collection needed

**Other Considerations**

* When using `innerText`, it's essential to consider potential issues with layout or event handling if the text content is not updated correctly.
* Using `append` can lead to unnecessary memory allocations if not done carefully.

**Library and Special JS Features Used in Test Cases**

In this benchmark, no special JavaScript features or syntax are being tested. The test cases only focus on comparing two different approaches to set the text content of an HTML element.

**Alternatives**

If you wanted to explore other alternatives, some possible options could be:

* Using `textContent` directly instead of `innerText`, which would update the entire content of the element.
* Using a library like jQuery or a similar framework that provides more convenient methods for updating element contents.
* Comparing the performance of different JavaScript engines or versions by adding additional test cases.

Keep in mind that this is just one possible benchmark, and there are many other approaches and scenarios you could explore to measure the performance characteristics of JavaScript code.

Related benchmarks:

innerText vs append v6 (version: 0)

Comparing performance of: innerText vs append

Created: 2 years ago by: Guest

Jump to the latest result

innerText

append

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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