Benchmark: innerText vs. textContent writing

HTML Preparation code:

<style>
  .headline {
    width: 100%;
    color: #c0ffee;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 2rem;
    font-width: 700;
    line-height: 1.5;
  	text-align: center;
  }
</style>
<h1 id="testSubject" class="headline">this is a test</h1>

Script Preparation code:

const testSubject = document.getElementById("#testSubject");

Tests:

innerText
testSubject.innerText = "that is another test";
textContent
testSubject.textContent = "that is another test";

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerText
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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
innerText	534310.6 Ops/sec
textContent	1718169.8 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's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark is designed to test how writing an element's text content using `innerText` versus `textContent` affects performance. The goal is to determine which method is faster in different browsers and environments.

**Options Compared**

Two options are being compared:

1. **innerText**: This method uses the `innerHTML` property of the element to set its text content.
2. **textContent**: This method uses the `textContent` property of the element to set its text content.

**Pros and Cons**

* **innerText**:
	+ Pros: Typically faster, as it avoids parsing HTML markup.
	+ Cons: Can lead to security issues if used with untrusted data, as it can execute arbitrary JavaScript code. Additionally, it may not work correctly in all situations (e.g., when the element has a `style` attribute).
* **textContent**:
	+ Pros: Safer and more predictable, as it only sets text content without executing any additional JavaScript code.
	+ Cons: May be slower due to parsing HTML markup.

**Library Usage**

None of the benchmark's test cases use any external libraries. The `innerText` and `textContent` methods are built-in properties of DOM elements in JavaScript.

**Special JS Features or Syntax (Not Applicable)**

No special JavaScript features or syntax are being used in this benchmark.

**Benchmark Preparation Code**

The preparation code sets up a basic HTML document with an `<h1>` element, which will be used as the test subject. The `testSubject` variable is assigned to the element using `document.getElementById`.

**Individual Test Cases**

There are two individual test cases:

1. **innerText**: This test case sets the text content of the `testSubject` element using the `innerText` property.
2. **textContent**: This test case sets the text content of the `testSubject` element using the `textContent` property.

**Latest Benchmark Result**

The latest benchmark result shows two runs:

1. **textContent**: The Chrome 126 browser on a Windows Desktop platform achieved an execution rate of approximately 534,310 executions per second.
2. **innerText**: The same browser and environment achieved an execution rate of approximately 171,816,169 executions per second.

This suggests that `innerText` is significantly faster than `textContent`.

**Alternatives**

If you were to create a similar benchmark, you could consider the following alternatives:

* Test with different browsers or versions to see how performance changes.
* Use more complex HTML elements or attributes to simulate real-world scenarios.
* Introduce additional factors like styling or layout changes to observe their impact on performance.
* Explore other methods for setting text content, such as using a library like jQuery or a custom function.

Related benchmarks:

innerText vs. textContent writing (version: 0)

testing writing an elements text with innerText vs. textContent

Comparing performance of: innerText vs textContent

Created: one year ago by: Guest

Jump to the latest result

innerText

textContent

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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