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

Autogenerated LLM Summary (model llama3.2:3b, generated one month 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.

Latest run results:

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

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

Browser/OS: Chrome 112 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
querySelector	4884793.5 Ops/sec
innerText	970119.3 Ops/sec
offsetWidth	1009737.0 Ops/sec
innerHTML	3397730.0 Ops/sec
outerText	946291.2 Ops/sec
textContent	3348811.8 Ops/sec

Related benchmarks:

querySelector vs innerText vs offsetWidth vs outerText (version: 0)

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

Created: 4 years ago by: Guest

Jump to the latest result

querySelector

innerText

offsetWidth

innerHTML

outerText

textContent

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