Benchmark: createTextNode vs textContent vs innerText vs nodeValue

Script Preparation code:

var a = document.createElement('a');

Tests:

createTextNode
a.appendChild(document.createTextNode('text'));
textContent
a.textContent = 'text';
innerText
a.innerText = 'text';
nodeValue
a.nodeValue = 'text';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createTextNode
textContent
innerText
nodeValue

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:141.0) Gecko/20100101 Firefox/141.0

Browser/OS: Firefox 141 on Linux

View result in a separate tab

Test name	Executions per second
createTextNode	2539822.0 Ops/sec
textContent	4923004.0 Ops/sec
innerText	2645653.0 Ops/sec
nodeValue	60691164.0 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 options, pros and cons, and other considerations.

**Benchmark Overview**

The benchmark measures the performance of different approaches to set text content on an HTML element: `createTextNode`, `textContent`, `innerText`, and `nodeValue`. The test creates a single HTML anchor element (`<a>`) using JavaScript and then sets its text content using each of these four methods.

**Options Compared**

1. **createTextNode**: Creates a new text node using the `document.createTextNode()` method, which is then appended to the HTML element.
2. **textContent**: Sets the text content directly on the HTML element using the `textContent` property (or `nodeValue` in older browsers).
3. **innerText**: Sets the inner text of the HTML element using the `innerText` property (or `nodeValue` in older browsers).
4. **nodeValue**: Similar to `textContent`, but uses the `nodeValue` property (or `innerText` in older browsers) to set the text content.

**Pros and Cons**

* **createTextNode**:
	+ Pros: Can be used to create a new text node, which might be useful in certain scenarios.
	+ Cons: Requires creating an additional DOM element (the text node), which can lead to increased memory usage.
* **textContent** (and **nodeValue**):
	+ Pros: Directly sets the text content on the HTML element, which is often the most efficient approach.
	+ Cons: May not be supported in older browsers or specific use cases where a new DOM element needs to be created.
* **innerText** (and **nodeValue**):
	+ Pros: Similar to `textContent` and `nodeValue`, but might offer better performance due to optimizations in modern browsers.
	+ Cons: Limited support in older browsers, and might not work as expected in certain scenarios.

**Library and Special JS Features**

There are no libraries or special JavaScript features used in this benchmark. However, it's worth noting that some of these properties (e.g., `textContent`, `innerText`) are supported by Web APIs like the DOM2Core specification, which is a W3C standard.

**Other Considerations**

* **Browser Support**: The benchmark only measures performance on Chrome 120 and Windows desktop platforms. Other browsers or operating systems might exhibit different performance characteristics.
* **Memory Usage**: Creating a new text node using `createTextNode` can lead to increased memory usage, which might impact the overall performance of the application.

**Alternatives**

If you're interested in exploring alternative approaches or optimizations, consider the following:

* Use a library like jQuery to simplify DOM manipulation and potentially improve performance.
* Implement a custom caching mechanism for frequently accessed text content to reduce the number of DOM updates.
* Consider using Web Workers or other parallel execution models to offload computationally intensive tasks.

Keep in mind that these alternatives might not be directly applicable to this specific benchmark, but they could be useful in other scenarios where similar optimizations are needed.

Related benchmarks:

createTextNode vs textContent vs innerText vs nodeValue (version: 0)

Comparing performance of: createTextNode vs textContent vs innerText vs nodeValue

Created: 6 years ago by: Guest

Jump to the latest result

createTextNode

textContent

innerText

nodeValue

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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