Benchmark: innerText vs innerHTML (performance 3)

HTML Preparation code:

<div id='container'></div>

Script Preparation code:

const container = document.querySelector('#container');

Tests:

innerHTML
container.innerHTML = 'This is a text to compare innerText and innerHTML';
innerText
container.innerText = 'This is a text to compare innerText and innerHTML';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
innerText

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 127 on Windows

View result in a separate tab

Test name	Executions per second
innerHTML	409493.6 Ops/sec
innerText	631577.2 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark compares the performance of two methods for setting text content within a DOM element: `innerHTML` and `innerText`.

**Options Compared:**

* **`innerHTML`**:  Parses the provided string as HTML, allowing you to insert not just text but also HTML tags. This can be useful for dynamically generating more complex content.
* **`innerText`**: Treats the provided string purely as text, without parsing any HTML tags. It's generally faster than `innerHTML` because it avoids the overhead of HTML parsing.

**Pros/Cons:**

* **`innerHTML`:** 
    * **Pro:** Flexibility to insert HTML elements and structure.
    * **Con:** Slower due to HTML parsing, potentially more vulnerable to Cross-Site Scripting (XSS) attacks if user-generated content is inserted without proper sanitization.

* **`innerText`:** 
    * **Pro:** Faster performance since it avoids HTML parsing.
    * **Con:** Limited to plain text; cannot insert HTML tags directly.

**Other Considerations:**

* **Context Matters:** If you need to display HTML elements, `innerHTML` is necessary. For simple text updates, `innerText` is usually the more efficient choice.

* **Alternatives:** In modern JavaScript frameworks like React or Vue, these methods might be abstracted away with templating systems that handle rendering and performance optimization internally.

Let me know if you have any other questions!

Related benchmarks:

innerText vs innerHTML (performance 3) (version: 2)

This benchmark is to compare the performance of innerText vs innerHTML when binding text to the DOM.

Comparing performance of: innerHTML vs innerText

Created: 3 years ago by: Registered User

Jump to the latest result

innerHTML

innerText

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):