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>

Script Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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 2 months ago):

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**

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.

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 2 months ago):