Benchmark: innerHTML vs innerText vs textContent with lower i

HTML Preparation code:

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

Script Preparation code:

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

Tests:

innerText
let i = 100; let el = document.querySelector("#hello"); while (i--) { el.innerText = "Goodbye, cruel world!" }
innerHtml
let i = 100; 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
innerText
innerHtml

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 137 on Windows

View result in a separate tab

Test name	Executions per second
innerText	25525.0 Ops/sec
innerHtml	3101036.2 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 Definition**

The benchmark measures the performance of two HTML string manipulation methods: `innerHTML` and `innerText`. Both methods are used to update the text content of an HTML element.

**Options Compared**

1. **innerHTML**: This method directly sets the inner HTML of an element, which includes both the text content and any HTML structure (e.g., `<p>`, `<span>`, etc.) that might be present.
2. **innerText**: This method only updates the text content of an element without modifying its HTML structure.

**Pros and Cons**

* **innerHTML**:
	+ Pros: Easier to use when you need to update both text and HTML structure.
	+ Cons: Can be slower and more memory-intensive since it needs to parse and manipulate the entire HTML string, which can lead to slower performance on complex pages.
* **innerText**:
	+ Pros: Faster and more efficient since it only updates the text content without modifying the HTML structure, making it suitable for large datasets or complex pages.
	+ Cons: Requires more code to update both text and HTML structure if needed.

**Library Used**

None is mentioned in the provided benchmark definition. However, some libraries like jQuery (not used here) might use `innerHTML` internally to simplify DOM manipulation.

**Special JavaScript Features/Syntax**

There are no special features or syntax mentioned in this benchmark.

**Other Considerations**

* Modern browsers have optimized `innerText` and `innerHTML` for performance, especially when using modern CSS selectors like `querySelector`.
* Using `innerHTML` can lead to security vulnerabilities if not sanitized properly (e.g., injecting user-inputted HTML).

**Alternatives**

For similar benchmarks:

* Testing the performance of `textContent`, which is a more concise way to set text content without relying on `innerText` and `innerHTML`.
* Evaluating different string manipulation methods, such as using a templating engine like Handlebars or Mustache.
* Comparing the performance of DOM manipulation methods like `appendChild`, `insertAdjacentHTML`, or `createElement`.

Keep in mind that this benchmark focuses specifically on the performance comparison between `innerHTML` and `innerText`.

Related benchmarks:

innerHTML vs innerText vs textContent with lower i (version: 0)

blah blah

Comparing performance of: innerText vs innerHtml

Created: one year ago by: Guest

Jump to the latest result

innerText

innerHtml

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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