Benchmark: get focusable element: querySelectorAll vs loop v2

HTML Preparation code:

<div>
  <div class="container">
    <div id="target" class="container">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <div tabindex="0">Focusable</div>
      <div class="container">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
        <a href="#">Link 6</a>
        <a href="#">Link 7</a>
        
        <div class="container">
          <div tabindex="0">Focusable</div>
          <input type="text" />
        </div>
      </div>
    </div>
    <div class="container">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <div tabindex="0">Focusable</div>
      <div class="container">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
        <a href="#">Link 6</a>
        <a href="#">Link 7</a>
        
        <div class="container">
          <div tabindex="0">Focusable</div>
          <input type="text" />
          <input disabled="disabled" type="text" />
        </div>
      </div>
      <div class="container">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <div tabindex="0">Focusable</div>
      <div class="container">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
        <a href="#">Link 6</a>
        <a href="#">Link 7</a>
        
        <div class="container">
          <div tabindex="0">Focusable</div>
          <input type="text" />
        </div>
      </div>
        <div class="container">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <div tabindex="0">Focusable</div>
      <div class="container">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
        <a href="#">Link 6</a>
        <a href="#">Link 7</a>
        
        <div class="container">
          <div tabindex="0">Focusable</div>
          <input type="text" />
        </div>
      </div>
    </div>
  </div>
</div>

Script Preparation code:

var target = document.getElementById('target');

function getCandidates(target) {
  var candidates = [];
  
  var children = target.children;
  
  for (var element of children) {
    if (element.tabIndex >= 0 && (element.disabled === undefined || element.disabled === false) && element.inert === false) {
      if (element.tagName === 'A' && element.getAttribute('href') === null) {
		continue;
      }

      candidates.push(element);
    }
    
    if (element.childElementCount) {
      candidates = candidates.concat(getCandidates(element));
    }
  }
  
  return candidates;
}

Tests:

for loop
getCandidates(target);
querySelectorAll
const candidates = Array.from(target.querySelectorAll( 'a[href], button:not(:disabled), input:not(:disabled), textarea:not(:disabled), select:not(:disabled), details, [tabindex]:not([tabindex="-1"])' )); candidates.filter((candidate) => candidate.inert === false);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for loop
querySelectorAll

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for loop	205650.4 Ops/sec
querySelectorAll	320494.1 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 benchmark and its components.

**Benchmark Definition**

The benchmark is defined by two test cases: `querySelectorAll` and `for loop`. The first test case uses the `Array.from()` method with `querySelectorAll()` to retrieve all elements that match a specific CSS selector, while the second test case uses a traditional for loop to achieve the same result.

**Options Compared**

The benchmark compares the performance of two approaches:

1. **querySelectorAll**: This approach uses the `querySelectorAll()` method to select elements based on a CSS selector.
2. **For Loop**: This approach uses a traditional for loop to iterate through all child elements of an element and filter out elements that don't meet certain conditions.

**Pros and Cons**

* **querySelectorAll**:
	+ Pros: More concise and expressive way of selecting elements, can be faster since it's optimized by the browser.
	+ Cons: May not work as expected if the selector is complex or has many dependencies.
* **For Loop**:
	+ Pros: Easy to understand and implement, works with any element hierarchy.
	+ Cons: Can be slower due to the overhead of iterating through elements.

**Library Used**

The `querySelectorAll()` method uses the W3C DOM Query API, which is a standardized way of selecting elements in HTML documents. The library used is the browser's own implementation of this API.

**Special JS Features/Syntax**

* None mentioned explicitly, but it's worth noting that both approaches rely on modern JavaScript features (e.g., `Array.from()`, arrow functions).

**Benchmark Results**

The latest benchmark results show that the `querySelectorAll` approach outperforms the `for loop` approach in terms of executions per second.

In summary, this benchmark compares the performance of two approaches to retrieve elements from an HTML document: using `querySelectorAll()` with a CSS selector and a traditional for loop. The results suggest that `querySelectorAll` is faster due to its optimized implementation by the browser.

Related benchmarks:

get focusable element: querySelectorAll vs loop v2 (version: 4)

Comparing performance of: for loop vs querySelectorAll

Created: 2 years ago by: Registered User

Jump to the latest result

for loop

querySelectorAll

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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