Benchmark: set node value - MeasureThat.net

HTML Preparation code:

<div id="el"></div>

Script Preparation code:

var a = document.querySelector('#el');

Tests:

textContent
a.textContent = Math.random();
innerHtml
a.innerHtml = Math.random();
nodeValue
a.nodeValue = Math.random();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
textContent
innerHtml
nodeValue

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
textContent	1693396.4 Ops/sec
innerHtml	10082470.0 Ops/sec
nodeValue	2543358.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 what's being tested on the provided JSON.

The benchmark measures the performance of setting different values to an HTML element's content, specifically:

1. `textContent`: Setting the text content of an element using the `textContent` property.
2. `innerHtml`: Setting the inner HTML of an element using the `innerHTML` property.
3. `nodeValue`: Setting the node value (equivalent to `nodeValue`) of an element.

These three properties are used to set the content of an HTML element.

**Options being compared:**

1. `textContent`
2. `innerHtml`
3. `nodeValue`

The pros and cons of each approach:

* `textContent`:
	+ Pros: More modern and widely supported, as it's part of the ECMAScript standard.
	+ Cons: May not work in older browsers or environments that don't support it.
* `innerHtml`:
	+ Pros: Widely supported across different browsers and versions. However, it can lead to security issues if used with user-input data.
	+ Cons: Less efficient than `textContent`, as it parses the HTML string and executes any JavaScript code within it.
* `nodeValue`:
	+ Pros: Similar to `textContent` but more explicit about setting only the text content without executing any JavaScript.
	+ Cons: May not be supported in older browsers or environments.

**Library usage:**

None of the benchmark cases explicitly uses a library. However, the use of `innerHTML` property might imply that the browser is using its internal HTML parsing mechanism, which may vary between implementations.

**Special JS feature or syntax:**

None are mentioned.

Now, let's talk about other alternatives:

1. `createElementText()`: This method creates a new text node and appends it to an element. It's similar to setting `nodeValue`, but more explicit.
2. `appendChild()`: You could set the content of an element by appending a text node created using `document.createTextNode()` to the element. However, this approach would not directly compare to the original three options.

Keep in mind that these alternatives might change the performance characteristics or behavior of the benchmark results.

**Benchmark preparation code:**

The script preparation code is setting up a variable `a` by selecting an HTML element with the id "el". The HTML preparation code creates a simple `<div>` element with no content, which will be used as the target for the benchmark tests.

By using these scripts and HTML elements, the benchmark can accurately measure the performance of setting different values to the element's content.

Related benchmarks:

set node value (version: 0)

Comparing performance of: textContent vs innerHtml vs nodeValue

Created: 2 years ago by: Guest

Jump to the latest result

textContent

innerHtml

nodeValue

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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