Benchmark: innerHTML vs innerText vs textContent 2

HTML Preparation code:

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

Script Preparation code:

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

Tests:

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

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON for the MeasureThat.net benchmark.

**Benchmark Definition**

The benchmark compares three different ways to update the text content of an HTML element in JavaScript: `innerHtml`, `innerText`, and `textContent`.

**Options Compared**

* `innerHtml`: Sets the inner HTML of an element, including the HTML tags.
* `innerText`: Sets the text content of an element without including the HTML tags.
* `textContent`: Sets the text content of an element, which can include HTML tags.

**Pros and Cons**

* **innerHtml**: Pros: works well for simple cases where you need to update the entire HTML structure. Cons: can lead to security vulnerabilities if used with user-inputted data, as it allows HTML injection.
* **innerText**: Pros: more secure than `innerHtml` when dealing with user-inputted data, as it prevents HTML injection. Cons: may not be suitable for cases where you need to update the entire HTML structure.
* **textContent**: Pros: a balance between `innerHtml` and `innerText`, as it allows HTML tags but still prevents most security issues. Cons: can lead to performance issues if the element's text content is large.

**Library Used**

None, this benchmark does not use any external libraries.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark.

**Other Considerations**

The benchmark assumes that the test HTML elements have a `id` attribute set to "hello". The test code also uses `document.querySelector()` and `document.getElementById()` to retrieve the element by its ID.

**Alternatives**

If you want to write similar benchmarks, you can consider testing other JavaScript APIs or features, such as:

* DOM manipulation (e.g., `appendChild()`, `removeChild()`)
* Event handling (e.g., `addEventListener()`, `removeEventListener()`)
* CSS-related APIs (e.g., `getComputedStyle()`, `requestAnimationFrame()`)

Keep in mind that the performance and security implications of different JavaScript features can vary greatly depending on the context, so it's essential to consider these factors when writing benchmarks.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows

View result in a separate tab

Test name	Executions per second
innerText	835.0 Ops/sec
innerHtml	312274.4 Ops/sec
textContent	1413.9 Ops/sec

Related benchmarks:

innerHTML vs innerText vs textContent 2 (version: 0)

blah blah

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>

Experimental features:

Fastest: N/A

Slowest: N/A

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