Benchmark: textContent vs innerHTML vs innerText

HTML Preparation code:


<div id='hello'>Hello, World!</div>

Script Preparation code:

var el = document.getElementById('hello');

Tests:

innerText
el.innerText = "Goodbye, cruel world!"
innerHtml
el.innerHTML = "Goodbye, cruel world!"
textContent
el.textContent = "Goodbye, cruel world!"

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerText
innerHtml
textContent

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Linux

View result in a separate tab

Test name	Executions per second
innerText	2250400.5 Ops/sec
innerHtml	1066781.1 Ops/sec
textContent	13887165.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 world of JavaScript microbenchmarks on MeasureThat.net.

The provided JSON represents a benchmark test case that compares three approaches for setting the text content of an HTML element: `textContent`, `innerHTML`, and `innerText`. Here's a breakdown of what's being tested:

**Benchmark Definition**

The "Name" field specifies the name of the benchmark, which is "textContent vs innerHTML vs innerText". The "Description" field provides a brief explanation of the test case.

**Script Preparation Code**

The script preparation code retrieves an HTML element with the id "hello" using `document.getElementById('hello')`. This element will be used to test the three approaches.

**Html Preparation Code**

The HTML preparation code defines a simple HTML structure with a paragraph element containing the text "Hello, World!" and assigns it to the previously retrieved element. This creates an executable environment for testing.

**Individual Test Cases**

The benchmark consists of three individual test cases, each defining a different approach:

1. `innerText`: Sets the innerText property of the element using the string "Goodbye, cruel world!".
2. `innerHtml`: Sets the innerHTML property of the element using the string "Goodbye, cruel world!".
3. `textContent`: Sets the contentText property of the element using the string "Goodbye, cruel world!".

Now, let's discuss the pros and cons of each approach:

* **innerText**: This method is relatively fast because it only sets the inner text without parsing or manipulating the HTML markup. However, some browsers may not support this property (e.g., older versions of Internet Explorer), and it may not work correctly with certain HTML elements.
* **innerHTML**: This method is slower than `innerText` because it parses and manipulates the entire HTML structure, which can lead to more complex parsing and rendering processes. Additionally, this approach can be more prone to security vulnerabilities if used with user-input data.
* **textContent**: This method falls in between `innerText` and `innerHTML` in terms of speed and complexity. It sets the content text without parsing the HTML markup but may still involve some level of manipulation. The support for this property is generally better than `innerText`, making it a safer choice.

**Library Usage**

None of these test cases rely on external libraries, so there are no additional dependencies to consider.

**Special JS Features or Syntax**

The benchmark does not use any special JavaScript features or syntax that require explanation.

**Other Considerations**

When running this benchmark, users can expect the results to indicate which approach is the fastest for setting text content in their browser. The executions per second value represents how many times each test case was executed during a single second, providing insight into the performance differences between the three approaches.

For developers who want to optimize their code, understanding these differences can help them choose the most efficient method for their use cases. Additionally, this benchmark provides a useful resource for identifying potential bottlenecks in text content manipulation and encouraging best practices for web development.

Related benchmarks:

textContent vs innerHTML vs innerText (version: 0)

textContent vs innerHTML vs innerText test case

Comparing performance of: innerText vs innerHtml vs textContent

Created: one year ago by: Guest

Jump to the latest result

innerText

innerHtml

textContent

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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