Benchmark: textContent vs innerText

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

var node = document.getElementById('container');

for(var i = 0; i < 1000; i++) node.appendChild(document.createElement('div'));

Tests:

textc
var node = document.getElementById('container'); node.textContent = '';
innerh
var node = document.getElementById('container'); node.innerHTML = '';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
textc
innerh

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Linux

View result in a separate tab

Test name	Executions per second
textc	5886773.5 Ops/sec
innerh	6030693.0 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 provided benchmark test.

**What is being tested?**

The benchmark tests two approaches to clearing text content of an HTML element: `textContent` and `innerHTML`. The test creates 1000 HTML elements in a container, which are then cleared using these two methods. The goal is to determine which method is faster.

**Options compared:**

* `textContent`: This property sets or returns the text content of an element without changing its structure.
* `innerHTML`: This property sets or returns the HTML content of an element, including elements and their attributes.

**Pros and Cons:**

* **textContent**: Pros:
	+ Faster (according to the benchmark results)
	+ Only clears the text content, leaving the element's structure intact
* Cons:
	+ Does not change the element's structure, which might be desirable in some cases
* `innerHTML`: Pros:
	+ Changes the element's structure if new HTML is provided
	+ Includes elements and their attributes in the cleared value
* Cons:
	+ Slower (according to the benchmark results)
	+ Clears more data than necessary (i.e., elements, attributes, etc.)

**Library used:**

In this test, no specific library is mentioned. However, it's likely that the standard JavaScript DOM API is being used.

**Special JS feature/syntax:**

None are explicitly mentioned in this test case. If there were any special features or syntax, they would be relevant to the results and conclusions drawn from the benchmark.

**Benchmark preparation code:**

The script prepares a container element by appending 1000 HTML elements using `appendChild`. The resulting HTML structure is then cleared using either `textContent` or `innerHTML`.

**Html preparation code:**

A simple HTML element (`<div>`) with an ID of "container" is created and served as the test data.

**Benchmark results:**

The benchmark results show that `textContent` is faster than `innerHTML`. The exact execution times are provided, which can be used to inform future optimizations or implementations.

**Other alternatives:**

Some alternative approaches to clearing text content or HTML elements include:

* Using a CSS rule to hide the element (e.g., `display: none;`)
* Replacing the element with an empty string using `element.replaceWith('')`
* Using a library like jQuery to clear the content
* Using a custom implementation that clears the element's structure and text content

Keep in mind that these alternatives might have different performance characteristics, depending on the specific use case and requirements.

Related benchmarks:

textContent vs innerText (version: 0)

f

Comparing performance of: textc vs innerh

Created: 5 years ago by: Guest

Jump to the latest result

textc

innerh

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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