Benchmark: querySelector Class vs querySelector Attribute

HTML Preparation code:

<div>
  <span class="a"></span>
  <span class="b"></span>
  <span class="c"></span>
  <span class="d">
    <span class="e"></span>
    <span class="f"></span>
    <span class="g"></span>
  </span>
  <span class="a"></span>
  <span class="b"></span>
  <span class="c"></span>
  <span class="d">
    <span class="e"></span>
    <span class="f">
      <div class="test" someattr="test"></div>
    </span>
    <span class="g"></span>
  </span>
</div>

Tests:

querySelector by Class
document.querySelector(".test");
querySelector by Attribute
document.querySelector('[someattr="test"]');
querySelector by Class Attribute
document.querySelector('[class="test"]');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector by Class
querySelector by Attribute
querySelector by Class Attribute

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0

Browser/OS: Firefox 150 on Linux

View result in a separate tab

Test name	Executions per second
querySelector by Class	5425381.0 Ops/sec
querySelector by Attribute	6264547.0 Ops/sec
querySelector by Class Attribute	4932177.5 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 definition and test cases to understand what is being tested.

**Benchmark Definition**

The benchmark definition in JSON format represents a JavaScript microbenchmark that compares different approaches for querying elements on an HTML page. The script preparation code is empty, which means no additional setup or initialization is required before running the benchmark.

**Html Preparation Code**

The HTML preparation code defines a simple structure with multiple spans and a nested div element. This structure will be used to test the querySelector methods. The spans have different classes (a, b, c, d, e, f, g) that will be used for querying.

**Individual Test Cases**

There are three test cases:

1. `querySelector by Class`: Tests the `document.querySelector(".test")` method.
2. `querySelector by Attribute`: Tests the `document.querySelector('[someattr="test"]')` method.
3. `querySelector by Class Attribute`: Tests the `document.querySelector('[class="test"]')` method.

**Options Compared**

The benchmark compares three different querySelector methods:

* `document.querySelector(".test")`
* `document.querySelector('[someattr="test"]')`
* `document.querySelector('[class="test"]')`

Each of these methods is used to select a specific element on the HTML page based on different criteria (class, attribute).

**Pros and Cons of Different Approaches**

1. **`document.querySelector(".test")`**: This method uses a class selector to find an element. It's fast because it only looks for elements with the exact class name.
	* Pros: Fast, straightforward approach.
	* Cons: May not work if there are multiple elements with the same class, and may be less efficient than other methods if there are many classes used in the document.
2. **`document.querySelector('[someattr="test"]')`**: This method uses an attribute selector to find an element. It's slower because it needs to check each element's attributes to find a match.
	* Pros: Works even if multiple elements have different values for the same attribute, can be useful in complex documents with many attributes.
	* Cons: Slower than class selectors, may be more resource-intensive.
3. **`document.querySelector('[class="test"]')`**: This method uses a combination of an attribute selector and a class selector to find an element.
	* Pros: Balances speed and accuracy compared to other methods.
	* Cons: May still have performance issues if there are many classes used in the document, may be less efficient than pure class selectors.

**Libraries Used**

There is no explicit library mentioned in the benchmark definition. However, the use of `document.querySelector()` implies that the script runs on a webpage with a modern browser that supports the W3C DOM API.

**Special JS Features or Syntax**

None are explicitly mentioned, but the use of attribute selectors (`[someattr="test"]`) is a feature introduced in CSS Selectors Level 4, which is supported by most modern browsers.

Related benchmarks:

querySelector Class vs querySelector Attribute (version: 2)

Comparing performance of: querySelector by Class vs querySelector by Attribute vs querySelector by Class Attribute

Created: 5 years ago by: Registered User

Jump to the latest result

querySelector by Class

querySelector by Attribute

querySelector by Class Attribute

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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