Benchmark: textContent vs innerHtml

HTML Preparation code:

<div id='test'>Change me</div>

Tests:

textContent
let testElem = document.querySelector("#test"); let i = 2_000_000; while (i--) { testElem.textContent = "HAHAHAHAHA<br>BRBRBR</br>" }
innerHtml
let testElem = document.querySelector("#test"); let i = 2_000_000; while (i--) { testElem.innerHtml = "HAHAHAHAHA<br>BRBRBR</br>" }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
textContent
innerHtml

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 134 on Android

View result in a separate tab

Test name	Executions per second
textContent	4.3 Ops/sec
innerHtml	225.8 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 the pros/cons of each approach.

**Benchmark Definition**

The benchmark is testing two approaches to update the text content of an HTML element: `textContent` and `innerHTML`. The benchmark definition is a JSON object that contains the script preparation code and HTML preparation code for each test case.

**Script Preparation Code**

In both cases, we have a variable `testElem` assigned using `document.querySelector("#test")`, which selects the `<div>` element with the ID "test". This suggests that the focus is on the DOM manipulation aspect of updating the text content, rather than any other JavaScript-related aspects like event handling or asynchronous operations.

**Html Preparation Code**

The HTML preparation code simply creates a `<div>` element with an ID of "test" and assigns it to `testElem`.

**Test Cases**

We have two test cases:

1. `textContent`: This test case uses the `textContent` property to update the text content of the selected element.
2. `innerHtml`: This test case uses the `innerHTML` property to update the HTML content of the selected element.

**Options Compared**

The benchmark is comparing the performance of these two approaches: using `textContent` versus using `innerHTML`.

**Pros and Cons of Each Approach**

1. **textContent**
	* Pros:
		+ Faster, as it only updates the text content without creating a new DOM element.
		+ More lightweight, as it doesn't require parsing or escaping HTML tags.
	* Cons:
		+ May not work correctly with certain types of content (e.g., HTML comments).
2. **innerHTML**
	* Pros:
		+ Works with any type of content, including HTML comments.
	* Cons:
		+ Slower, as it creates a new DOM element and parses the entire HTML string.
		+ More resource-intensive, as it requires more memory to store the parsed HTML.

**Library Usage**

Neither test case explicitly uses any external libraries. However, `innerHTML` is often used in conjunction with libraries like jQuery or a custom implementation of `innerHTML`.

**Special JS Features/Syntax**

There are no special JavaScript features or syntax being tested or utilized in this benchmark.

**Other Considerations**

1. **Browser Support**: The benchmark only shows results for Chrome 101 on Linux, which may not be representative of other browsers or platforms.
2. **DOM Manipulation**: This benchmark focuses on the performance of updating text content using `textContent` and `innerHTML`. Other aspects of DOM manipulation, like appending or removing elements, are not tested.

**Alternative Approaches**

Some alternative approaches to updating text content could include:

* Using a templating engine like Handlebars or Mustache.
* Utilizing a library like jQuery's `.html()` method or the `DOMPurify` library for sanitizing HTML content.
* Implementing a custom solution using regex patterns or string manipulation functions.

Related benchmarks:

textContent vs innerHtml (version: 0)

Comparing performance of: textContent vs innerHtml

Created: 3 years ago by: Guest

Jump to the latest result

textContent

innerHtml

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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