Benchmark: affectation : innerHTML vs textContent vs Element vs true

HTML Preparation code:

<button id="button">
  <p>This is the text of my Button</p>
  <template>
    <p style="color:red;">This is a template text</p>
    <p>So much things here</p>
  </template>
</button>

Script Preparation code:

var BUTTON = document.querySelector('#button');

Tests:

innerHTML
const a = BUTTON.innerHTML;
textContent
const b = BUTTON.textContent;
Element
const c = BUTTON;
true
const d = true;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
textContent
Element
true

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Windows

View result in a separate tab

true

225.9M/s

Element

30.6M/s

textContent

4.6M/s

innerHTML

1.3M/s

View exact numbers

Test name	Executions per second
✓ true	225,861,136 Ops/sec
Element	30,591,860 Ops/sec
textContent	4,609,290 Ops/sec
innerHTML	1,307,419 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmark that compares the performance of four different approaches: accessing an HTML element's `innerHTML`, `textContent`, `Element` property, and a primitive value (`true`). The benchmark is designed to measure which approach is the fastest.

**Options Compared**

1. **innerHTML**: Accessing the innerHTML of an element.
2. **textContent**: Accessing the text content of an element.
3. **Element**: Directly accessing the element object.
4. **true**: Accessing a primitive value (`true`).

**Pros and Cons of Each Approach**

1. **innerHTML**:
	* Pros: Convenient for getting the inner HTML of an element, easy to read and write.
	* Cons: May be slower due to DOM manipulation, can lead to unnecessary reflows or repainting.
2. **textContent**:
	* Pros: Efficient way to get the text content of an element, doesn't require DOM manipulation.
	* Cons: May not work as expected if the element contains other types of content (e.g., images).
3. **Element**:
	* Pros: Direct access to the element object, can be more efficient than accessing its properties.
	* Cons: Requires more manual handling of the element's state and events.
4. **true**:
	* Pros: Fastest way to access a primitive value, doesn't require any DOM manipulation or object creation.
	* Cons: Limited use cases, only applicable when working with simple boolean values.

**Library Used**

None explicitly mentioned in the provided JSON. However, it's likely that the `BUTTON` variable is an instance of an HTML element, which is created using the `document.querySelector` method from the DOM (Document Object Model).

**Special JS Feature/Syntax**

The benchmark uses template literals (`\r\n  <template>\r\n    ... \r\n  </template>\r\n`) to define a nested template inside the HTML string. This feature allows for more readable and concise template code.

**Other Alternatives**

If you need to compare the performance of other approaches, here are some additional options:

* Using `getComputedStyle` or `style` properties to access an element's styles.
* Comparing the performance of different DOM query methods (e.g., `querySelector`, `querySelectorAll`, `getElementById`).
* Examining the performance of using a library like jQuery or React to manipulate elements.

Keep in mind that the choice of approach depends on the specific use case and requirements. This benchmark provides a general comparison of simple, straightforward ways to access element properties, while more complex scenarios may require additional libraries or techniques.

affectation : innerHTML vs textContent vs Element vs true (version: 0) Benchmark.js

Comparing performance of: `innerHTML vs textContent vs Element vs true`

Created: 2 years ago by: Guest

Go to the latest result

innerHTML

textContent

Element

true

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

affectation : innerHTML vs textContent vs Element vs true (version: 0) Benchmark.js

Comparing performance of: innerHTML vs textContent vs Element vs true

Created: 2 years ago by: Guest

Go to the latest result

innerHTML

textContent

Element

true

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `innerHTML vs textContent vs Element vs true`