Benchmark: innerHTML vs innerText vs textContent P3

HTML Preparation code:

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

Tests:

innerHTML
let i = 1000; while (i--) { el.innerHTML = "Goodbye, cruel world!" }
innerText
let i = 1000; while (i--) { el.innerText = "Goodbye, cruel world!" }
textContent
let i = 1000; while (i--) { el.textContent = "Goodbye, cruel world!" }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
innerText
textContent

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
innerHTML	93.4 Ops/sec
innerText	148.5 Ops/sec
textContent	466.2 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, the options compared, their pros and cons, and other considerations.

**Benchmark Overview**

The benchmark tests three different approaches to update the text content of an HTML element: `innerHTML`, `innerText`, and `textContent`. The test is run on a Chrome 120 browser on a Windows desktop platform.

**Test Options**

1. **`innerHTML`**: This option sets the inner HTML of the element, including the element's tag name, attributes, and child nodes.
2. **`innerText`**: This option sets only the text content of the element.
3. **`textContent`**: This option sets both the text content and the data attribute (if present) of the element.

**Pros and Cons**

* `innerHTML`:
	+ Pros: Faster, as it updates the entire HTML structure, including attributes and child nodes.
	+ Cons: May lead to security vulnerabilities if user input is not properly sanitized, as it can execute arbitrary JavaScript code.
* `innerText`:
	+ Pros: Safer, as it only sets text content and doesn't execute any code. However, slower due to the extra DOM manipulation required.
	+ Cons: Slower than `innerHTML`, but more secure.
* `textContent`:
	+ Pros: Balances speed with security, as it updates both text content and data attributes (if present). Faster than `innerText`.
	+ Cons: May not be supported in older browsers or environments.

**Library Usage**

None of the test cases use any external libraries. However, the benchmark relies on the DOM API to manipulate the HTML element.

**Special JS Features/Syntax**

None mentioned in this specific benchmark.

**Other Considerations**

* **Browser Support**: The benchmark is run on Chrome 120, which may not be representative of other browsers or environments.
* **Device Platform**: The test is run on a Windows desktop platform, which may not be relevant to mobile devices or other platforms.
* **Test Environment**: The benchmark runs in a controlled environment, but real-world scenarios may introduce additional factors that affect performance and security.

**Alternatives**

Other approaches to update text content could include:

1. `outerHTML`: Similar to `innerHTML`, but also updates the element's tag name and attributes.
2. Using a template engine or string replacement library to render HTML templates.
3. Utilizing a third-party library for DOM manipulation, such as jQuery.

Keep in mind that each approach has its trade-offs and may be suited for specific use cases or performance-critical applications.

Related benchmarks:

innerHTML vs innerText vs textContent P3 (version: 0)

P3

Comparing performance of: innerHTML vs innerText vs textContent

Created: 2 years ago by: Guest

Jump to the latest result

innerHTML

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):