Benchmark: querySelector vs innerText vs offsetWidth vs outerText

HTML Preparation code:

<div id="testdiv">
  <div id="unique" class="unique" name="unique" data-unique="1">test</div>
</div>

Tests:

querySelector
document.querySelector('.unique')
innerText
document.querySelector('.unique').innerText
offsetWidth
document.querySelector('.unique').offsetWidth
innerHTML
document.querySelector('.unique').innerHTML
outerText
document.querySelector('.unique').outerText
textContent
document.querySelector('.unique').textContent

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
innerText
offsetWidth
innerHTML
outerText
textContent

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

querySelector

9.0M/s

textContent

4.3M/s

innerHTML

4.1M/s

offsetWidth

795K/s

outerText

694K/s

innerText

661K/s

View exact numbers

Test name	Executions per second
✓ querySelector	8,960,820 Ops/sec
textContent	4,276,226 Ops/sec
innerHTML	4,110,426 Ops/sec
offsetWidth	794,743 Ops/sec
outerText	693,784 Ops/sec
innerText	660,835 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, the options compared, their pros and cons, and other considerations.

**Benchmark Overview**

The benchmark measures the performance of different methods for retrieving text from an HTML element: `querySelector`, `innerText`, `offsetWidth`, `innerHTML`, `outerText`, and `textContent`. The test targets a specific HTML element with an id of "unique" that contains the text "test".

**Options Compared**

Here's what each option is testing:

1. **`document.querySelector('.unique')`**: This method uses CSS selectors to find the element by its class, id, or name.
2. **`document.querySelector('.unique').innerText`**: This method retrieves the text content of an element using the `innerText` property.
3. **`document.querySelector('.unique').offsetWidth`**: This method returns the width of an element using the `offsetWidth` property.
4. **`document.querySelector('.unique').innerHTML`**: This method returns the HTML content of an element using the `innerHTML` property.
5. **`document.querySelector('.unique').outerText`**: This method is not a standard DOM property; it's likely a custom or proprietary method that may not be supported by all browsers.
6. **`document.querySelector('.unique').textContent`**: This method returns the text content of an element using the `textContent` property.

**Pros and Cons**

Here are some pros and cons for each option:

1. **`document.querySelector('.unique')`**:
	* Pros: Fast, efficient, and widely supported.
	* Cons: May return null if no matching elements are found.
2. **`document.querySelector('.unique').innerText`**:
	* Pros: Fast, but may require multiple DOM calls.
	* Cons: May not work in older browsers or with certain CSS selectors.
3. **`document.querySelector('.unique').offsetWidth`**:
	* Pros: Returns a numerical value, which can be useful for layout calculations.
	* Cons: May return 0 if the element has no width (e.g., due to overflow).
4. **`document.querySelector('.unique').innerHTML`**:
	* Pros: Returns the full HTML content of an element.
	* Cons: May contain unnecessary tags or formatting, which can impact performance.
5. **`document.querySelector('.unique').outerText`** (custom method):
	+ Pros: None documented.
	+ Cons: Unrecognized and unsupported by most browsers.
6. **`document.querySelector('.unique').textContent`**:
	* Pros: Returns the text content of an element, excluding HTML tags.
	* Cons: May not work in older browsers or with certain CSS selectors.

**Other Considerations**

When using these methods, keep in mind:

* The `querySelector` method is more powerful and flexible than the others but may be slower due to its parsing capabilities.
* The `innerText` property can return a mixture of text and HTML tags (e.g., `<span>test</span>`), which can affect performance and accuracy.
* The `offsetWidth` and `outerWidth` properties return numerical values that may not accurately represent the element's layout.

**Alternatives**

Other methods for retrieving text from an HTML element include:

* Using `getElementsByClassName()` or `getElementById()` to retrieve a NodeList of elements, which can be slower than `querySelector`.
* Using regular expressions (regex) to extract specific text patterns from an element.
* Utilizing libraries like DOMParser to parse HTML strings and extract text content.

Keep in mind that the performance differences between these methods may vary depending on the browser, hardware, and JavaScript engine used.

querySelector vs innerText vs offsetWidth vs outerText (version: 0) Benchmark.js

Comparing performance of: `querySelector vs innerText vs offsetWidth vs innerHTML vs outerText vs textContent`

Created: 6 years ago by: Guest

Go to the latest result

querySelector

innerText

offsetWidth

innerHTML

outerText

textContent

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

querySelector vs innerText vs offsetWidth vs outerText (version: 0) Benchmark.js

Comparing performance of: querySelector vs innerText vs offsetWidth vs innerHTML vs outerText vs textContent

Created: 6 years ago by: Guest

Go to the latest result

querySelector

innerText

offsetWidth

innerHTML

outerText

textContent

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: `querySelector vs innerText vs offsetWidth vs innerHTML vs outerText vs textContent`