Benchmark: querySelector(class) vs classList.some

HTML Preparation code:

<div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a b'>lol</div><div class='a'></div>

AخA
 
<div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a'></div><div class='a b'>lol</div><div class='a'></div>

Script Preparation code:

function querySelectorWrapper() {
    return !document.querySelector('.b');
}

function classListContainsWrapper(element) {
    return element.classList.contains('b');
}
var elementRef = document.querySelector('.b');

​x
 
function querySelectorWrapper() {    return !document.querySelector('.b');}​function classListContainsWrapper(element) {    return element.classList.contains('b');}var elementRef = document.querySelector('.b');

Tests:

querySelector
querySelectorWrapper();
querySelectorWrapper();
classList.contains
classListContainsWrapper(elementRef);
classListContainsWrapper(elementRef);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
querySelector
classList.contains

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Browser/OS: Chrome 116 on Linux

View result in a separate tab

Test name	Executions per second
querySelector	2213699.5 Ops/sec
classList.contains	10624568.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):

Measuring the performance of two different approaches to checking if an element has a certain class in JavaScript can be a useful benchmark.

What is being tested?

In this case, we are testing two methods:

querySelector (with CSS selector syntax): This method uses the document.querySelector() function with a CSS selector to check if an element matches a specific class.
classList.contains() (on the classList property of an element): This method checks if an element has a certain class by calling the contains() method on its classList property.

Options being compared

The options being compared are:

querySelector(class) (CSS selector syntax)
classList.some(element) (on the classList property)

Pros and cons of each approach:

querySelector(class) (CSS selector syntax):
- Pros:
  - More flexible and powerful for complex CSS selectors.
  - Can be used to select elements based on multiple conditions.
- Cons:
  - May be slower due to the overhead of parsing and executing a CSS selector.
  - Requires more memory to store the parsed CSS selector.
classList.some(element):
- Pros:
  - Faster and more lightweight, as it only checks for class existence without parsing CSS selectors.
  - Less memory required, as no additional data is stored.
- Cons:
  - More limited in its capabilities, only allowing a simple "contains" check.

In general, querySelector(class) offers more flexibility but comes with a potential performance cost. On the other hand, classList.some(element) provides faster execution and lower memory usage but has limitations in its expressiveness.

Libraries being used

There is no explicit library mentioned in the benchmark definition or individual test cases. However, it's worth noting that both methods rely on the built-in JavaScript functions for DOM manipulation and class checking.

Special JS features or syntax

The benchmark does not mention any special JavaScript features or syntax, such as async/await, promises, or modern syntax features like arrow functions or destructuring.

Other alternatives

If you were to implement this benchmark yourself, some alternative approaches might include:

Using querySelectorAll() and then checking the length of the resulting array.
Implementing a custom class-checking function using regular expressions or other methods.
Using a library like jQuery or a similar framework that provides its own implementation of class checking.

Keep in mind that these alternatives may not be as efficient or straightforward as the original querySelector(class) and classList.contains() methods, respectively.

LLMs can make mistakes. Check important info.

Measuring the performance of two different approaches to checking if an element has a certain class in JavaScript can be a useful benchmark.

**What is being tested?**

In this case, we are testing two methods:

1. `querySelector` (with CSS selector syntax): This method uses the `document.querySelector()` function with a CSS selector to check if an element matches a specific class.
2. `classList.contains()` (on the `classList` property of an element): This method checks if an element has a certain class by calling the `contains()` method on its `classList` property.

**Options being compared**

The options being compared are:

* `querySelector(class)` (CSS selector syntax)
* `classList.some(element)` (on the `classList` property)

**Pros and cons of each approach:**

1. **`querySelector(class)` (CSS selector syntax)**:
	* Pros:
		+ More flexible and powerful for complex CSS selectors.
		+ Can be used to select elements based on multiple conditions.
	* Cons:
		+ May be slower due to the overhead of parsing and executing a CSS selector.
		+ Requires more memory to store the parsed CSS selector.
2. **`classList.some(element)`**:
	* Pros:
		+ Faster and more lightweight, as it only checks for class existence without parsing CSS selectors.
		+ Less memory required, as no additional data is stored.
	* Cons:
		+ More limited in its capabilities, only allowing a simple "contains" check.

In general, `querySelector(class)` offers more flexibility but comes with a potential performance cost. On the other hand, `classList.some(element)` provides faster execution and lower memory usage but has limitations in its expressiveness.

**Libraries being used**

**Special JS features or syntax**

The benchmark does not mention any special JavaScript features or syntax, such as async/await, promises, or modern syntax features like arrow functions or destructuring.

**Other alternatives**

If you were to implement this benchmark yourself, some alternative approaches might include:

* Using `querySelectorAll()` and then checking the length of the resulting array.
* Implementing a custom class-checking function using regular expressions or other methods.
* Using a library like jQuery or a similar framework that provides its own implementation of class checking.

Keep in mind that these alternatives may not be as efficient or straightforward as the original `querySelector(class)` and `classList.contains()` methods, respectively.

Related benchmarks:

querySelector(class) vs classList.some (version: 0)

HTML DOM querySelector, vs looking into classList of element which already have

Comparing performance of: querySelector vs classList.contains

Created: one year ago by: Guest

Jump to the latest result

querySelector

classList.contains

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):