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 llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Overview**
------------------------

The benchmark is designed to compare the performance of two DOM (Document Object Model) methods: `innerText` and `innerHTML`. The goal is to determine which method is faster when binding text to the DOM.

**Test Cases**
--------------

There are two test cases:

1. **innerHTML**: This test case uses the `innerHTML` property to set a string of text to the container element.
2. **innerText**: This test case uses the `innerText` property to set a string of text to the container element.

**Options Compared**
--------------------

In this benchmark, we're comparing two options:

* Setting text using `innerHTML`
* Setting text using `innerText`

**Pros and Cons**
-----------------

Here are some pros and cons of each approach:

### innerHTML

* **Pros**: Can set HTML content (not just text), including tags. Fast for setting large amounts of HTML content.
* **Cons**: Can introduce XSS vulnerabilities if used with untrusted input, as it can execute JavaScript code.

### innerText

* **Pros**: Safer than `innerHTML`, as it only sets the text content and doesn't execute any JavaScript code. Fast for setting small to medium-sized text content.
* **Cons**: Not suitable for setting HTML content (it will strip all HTML tags).

**Library**
------------

No external libraries are used in this benchmark.

**Special JS Features or Syntax**
------------------------------

None are used in this test case.

**Other Alternatives**
----------------------

If you need to set HTML content, but want a safer alternative to `innerHTML`, consider using the `textContent` property (not shown in this benchmark). It's similar to `innerText`, but can handle larger amounts of text. However, keep in mind that it still doesn't execute JavaScript code.

Another option is to use a templating engine or a framework like React, which provides its own way of setting content and handling security concerns.

In conclusion, the main takeaway from this benchmark is that when binding small to medium-sized text content to the DOM, `innerText` might be a better choice than `innerHTML` due to performance differences. However, if you need to set HTML content or handle larger amounts of text, consider using `textContent` or other safer alternatives.

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 llama3.1:latest, generated one year ago):