Benchmark: Various ways of setting HTML text content

Script Preparation code:

var span1 = document.createElement('span');
var text1 = document.createTextNode('');
span1.appendChild(text1);

var span2 = document.createElement('span');

var span3 = document.createElement('span');

Tests:

createTextNode
text1.data = 'text';
textContent
span2.textContent = 'text';
innerText
span3.innerText = 'text';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createTextNode
textContent
innerText

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser/OS: Chrome 107 on Linux

View result in a separate tab

Test name	Executions per second
createTextNode	4564218.0 Ops/sec
textContent	5796043.5 Ops/sec
innerText	1499409.9 Ops/sec

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 data and explain what's being tested, compared, and analyzed in the benchmark.

**What is being tested?**

The provided benchmark measures the performance of three different ways to set HTML text content:

1. `createTextNode()`
2. `textContent` (a property on the `span` element)
3. `innerText` (a property on the `span` element)

These methods are used to populate a `span` element with text content.

**Options compared**

The benchmark compares the performance of these three methods:

* `createTextNode()`: Creates a new text node and appends it to the `span` element.
* `textContent`: Sets the text content property directly on the `span` element.
* `innerText`: Sets the inner text property directly on the `span` element.

**Pros and Cons of each approach**

1. **createTextNode()**:
	* Pros: More explicit control over creating a new text node, which can be beneficial for certain use cases (e.g., inserting multiple text nodes).
	* Cons: May incur additional overhead due to creating an extra object.
2. **textContent**:
	* Pros: Fast and efficient, as it directly sets the property on the element.
	* Cons: Less explicit control over the creation of the text node, which may lead to unexpected behavior if not used carefully.
3. **innerText**:
	* Pros: Similar to `textContent`, fast and efficient, with less overhead than creating a new text node.
	* Cons: Slightly different behavior between older browsers (e.g., IE) and newer ones (e.g., Chrome), where `innerText` is supported but `textContent` is not.

**Library usage**

None of the benchmark cases explicitly use any JavaScript libraries. The code only uses built-in browser APIs.

**Special JS feature or syntax**

The benchmark tests a special property called `textContent`, which was introduced in HTML5. This property allows setting the text content of an element directly, without creating a separate text node. However, this property may not be supported by older browsers, and its behavior can differ from the `innerText` property used in older browsers.

**Other alternatives**

To further optimize or compare performance, additional methods could be tested, such as:

* Using a template string or a regex to create the text content.
* Using a library like DOMPurify to sanitize the text content.
* Comparing the performance of different elements (e.g., `span`, `div`) for setting text content.

Keep in mind that these additional alternatives might introduce new complexities and variations in performance, making the benchmark more challenging and less representative of real-world use cases.

Related benchmarks:

Various ways of setting HTML text content (version: 0)

Comparing performance of: createTextNode vs textContent vs innerText

Created: 2 years ago by: Guest

Jump to the latest result

createTextNode

textContent

innerText

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):