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: one year 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

querySelector

21.4M/s

textContent

12.0M/s

textContentTrim

11.4M/s

innerHTML

10.8M/s

offsetWidth

1.7M/s

outerText

1.6M/s

innerText

1.5M/s

View exact numbers

Test name	Executions per second
✓ querySelector	21,409,334 Ops/sec
textContent	12,028,234 Ops/sec
textContentTrim	11,368,006 Ops/sec
innerHTML	10,788,352 Ops/sec
offsetWidth	1,736,306 Ops/sec
outerText	1,648,599 Ops/sec
innerText	1,510,298 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.

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

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

Created: 6 years ago by: Guest

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

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

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

Created: 6 years ago by: Guest

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

Related benchmarks

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