Benchmark: innerHTML vs textContent

HTML Preparation code:

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

Script Preparation code:

let el = document.querySelector("#hello");

Tests:

textContent
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.textContent = "Goodbye, cruel world!" }
innerHtml
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.innerHtml = "Goodbye, cruel world!" }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
textContent
innerHtml

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 15 on iOS 15.5

View result in a separate tab

Test name	Executions per second
textContent	12112.8 Ops/sec
innerHtml	1272247.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents a JavaScript microbenchmark test case on MeasureThat.net. The benchmark compares the performance of two approaches: using `innerHTML` and `textContent` to update the text content of an HTML element.

**Options Compared**

Two options are being compared:

1. **innerHTML**: This method sets the HTML content of an element directly, which can lead to issues with HTML parsing, escaping, and validation.
2. **textContent**: This method sets the text content of an element, without affecting its HTML structure or attributes.

**Pros and Cons**

* **innerHTML**:
	+ Pros: Simple and straightforward.
	+ Cons: Can lead to security vulnerabilities (e.g., XSS), performance issues due to HTML parsing, and DOM tree fragility.
* **textContent**:
	+ Pros: Safer, more efficient, and easier to maintain.
	+ Cons: May not work as expected in all cases (e.g., nested elements).

**Library Used**

In the provided benchmark code, no specific JavaScript library is used. However, `document.querySelector` is used to select an HTML element, which suggests that a modern browser's DOM API is being utilized.

**Special JS Feature or Syntax**

None of the special features or syntax are mentioned in the benchmark definition.

**Other Alternatives**

There are other alternatives for updating text content in JavaScript, such as:

* Using `innerText` (supported by Internet Explorer and some older browsers)
* Creating a new text node and appending it to the element's child nodes
* Using a library like jQuery or a custom solution to manipulate the DOM

**Benchmark Preparation Code**

The provided script preparation code creates an HTML element with the ID "hello" and assigns its content using both `innerHTML` and `textContent`. The HTML preparation code sets up the basic HTML structure.

**Individual Test Cases**

Each test case runs a loop that updates the text content of the selected element using either `innerHTML` or `textContent`. The loop iterates 1000 times, which is likely chosen to demonstrate performance differences between the two approaches.

Related benchmarks:

innerHTML vs textContent (version: 0)

well..

Comparing performance of: textContent vs innerHtml

Created: 2 years ago by: Guest

Jump to the latest result

textContent

innerHtml

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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