Benchmark: querySelector vs innerText vs offsetWidth vs outerText vs textContentTrim

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
textContentTrim
document.querySelector('.unique').textContent.trim()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
innerText
offsetWidth
innerHTML
outerText
textContent
textContentTrim

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 138 on Windows

View result in a separate tab

Test name	Executions per second
querySelector	21409334.0 Ops/sec
innerText	1510298.5 Ops/sec
offsetWidth	1736305.6 Ops/sec
innerHTML	10788352.0 Ops/sec
outerText	1648598.6 Ops/sec
textContent	12028234.0 Ops/sec
textContentTrim	11368006.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring performance differences between various DOM properties is crucial for optimizing web applications. Let's break down the benchmark and analyze each test case.

**Benchmark Overview**

The benchmark compares the performance of six different ways to retrieve or manipulate text content from an HTML element:

1. `querySelector` (selecting a descendant element)
2. `innerText`
3. `offsetWidth` (getting the width of the element's bounding rectangle)
4. `outerText` (getting the outer text content, including whitespace and comments)
5. `textContent`
6. `textContent.trim()` (trimming whitespace from the text content)

**Options Compared**

The benchmark tests each option on a simple HTML structure with one nested `<div>`:

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

Here are the pros and cons of each approach:

1. **`querySelector`**:
	* Pros: fast, efficient, and widely supported.
	* Cons: may not work as expected if the element is not found or if the CSS selector is complex.
2. **`innerText`**:
	* Pros: easy to use, concise syntax.
	* Cons: slower than `querySelector`, may not preserve whitespace or comments.
3. **`offsetWidth`**:
	* Pros: fast, efficient (no DOM traversal).
	* Cons: only returns the width of the element's bounding rectangle, not its text content.
4. **`outerText`**:
	* Pros: includes whitespace and comments in the text content.
	* Cons: slower than `querySelector`, may not work as expected with complex selectors.
5. **`textContent`**:
	* Pros: efficient (no DOM traversal), includes whitespace and comments.
	* Cons: only returns the text content, excluding any elements or attributes within the element.
6. **`textContent.trim()`**:
	* Pros: efficient (no DOM traversal), preserves whitespace by trimming it.
	* Cons: slower than `querySelector`, may not work as expected with complex selectors.

**Library Usage**

There is no specific library being tested in this benchmark, but some of these methods rely on the browser's built-in functionality. For example:

* `innerText` and `textContent` are properties of the DOM Element interface.
* `offsetWidth` and `outerText` are methods of the Window and Document interfaces.

**Special JS Features or Syntax**

None of the test cases use any special JavaScript features or syntax beyond standard ECMAScript syntax.

**Other Alternatives**

Some other alternatives that could be used to measure performance differences between DOM properties include:

* Using a library like jQuery to simplify DOM manipulation
* Comparing the performance of different HTML parsing libraries (e.g., DOMParser vs. string-based parsing)
* Testing the performance of JavaScript engine-specific optimizations (e.g., WebKit's `webkitLayoutEngine` vs. SpiderMonkey)

Keep in mind that these alternatives may not be directly comparable to this benchmark, as they might have different use cases or requirements.

Related benchmarks:

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

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

Created: 6 years ago by: Guest

Jump to the latest result

querySelector

innerText

offsetWidth

innerHTML

outerText

textContent

textContentTrim

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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