Benchmark: matches vs. closest vs. classList vs. querySelector

HTML Preparation code:

<div class="foo"></div>

Tests:

matches
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.matches(".foo"); }
closest
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.closest(".foo"); }
classList
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.classList.contains("foo"); }
querySelector
var i = 1000; while (i--) { document.querySelector(".foo"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
matches
closest
classList
querySelector

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
matches	41164.7 Ops/sec
closest	33683.9 Ops/sec
classList	47655.3 Ops/sec
querySelector	28742.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):

LLMs can make mistakes. Check important info.

The benchmark named "matches vs. closest vs. classList vs. querySelector" evaluates the performance of four distinct methods that are commonly used in JavaScript for querying or interacting with HTML elements. Below, I’ll explain each method tested, compare their pros and cons, and provide you with an overview of the results from the benchmark.

### Test Cases and Their Purpose

1. **matches()**
   - **Usage**: `element.matches(".foo")`
   - **Purpose**: This method checks if the specific element (`element`) matches the provided CSS selector (in this case, `".foo"`). It returns true or false.
   - **Pros**: It allows you to perform a quick check against CSS selectors directly on the element itself.
   - **Cons**: Slightly less performant compared to the other methods in this benchmark, as the selector check may take additional time.

2. **closest()**
   - **Usage**: `element.closest(".foo")`
   - **Purpose**: This method searches up the DOM tree from the element and returns the closest ancestor that matches the given selector (or the element itself if it matches).
   - **Pros**: It’s particularly useful for situation where you need to find ancestor elements, making it powerful in handling nested structures.
   - **Cons**: Performance is generally lower than `classList.contains` and can be affected if the DOM tree is deep.

3. **classList.contains()**
   - **Usage**: `element.classList.contains("foo")`
   - **Purpose**: This method checks if the element has a specific class name (here, "foo").
   - **Pros**: Very efficient as it operates directly on the element's class list without the need of selector processing.
   - **Cons**: Limited in functionality; it only works with class names and cannot check complex CSS selectors.

4. **querySelector()**
   - **Usage**: `document.querySelector(".foo")`
   - **Purpose**: This method retrieves the first element within the document that matches the specified selector.
   - **Pros**: Flexible and powerful for element selection using complex selectors.
   - **Cons**: It can be slower than other methods if you repeatedly search for the same element, as it involves parsing the selector every time.

### Benchmark Results

The benchmark results show the number of executions per second for each method when the loop runs 1000 times:

- **classList**: 56,265 executions/second (fastest)
- **closest**: 9,812 executions/second
- **querySelector**: 8,889 executions/second
- **matches**: 7,825 executions/second (slowest)

### Summary

From the results:
- `classList.contains` outperformed the other methods significantly, making it the best choice for checking whether an element has a certain class.
- `closest` is a good option when you need to find elements within the DOM hierarchy, although it's noticeably slower.
- `querySelector` provides flexibility but introduces more overhead due to selector parsing.
- `matches` is the least performant in this benchmark, but it remains valuable for CSS selector matching directly on an element.

### Other Considerations and Alternatives

- For scenarios with frequent class checks, sticking to `classList.contains` is recommended due to its speed.
- If the scope requires working with complex selectors frequently, `querySelector` may still be necessary despite its overhead.
- Developers might also consider caching the results of `querySelector` or `closest` when used in loops to spare unnecessary computations.
  
Ultimately, choosing the right method will depend on the specific use case, performance needs, and flexibility required.

Related benchmarks:

matches vs. closest vs. classList vs. querySelector (version: 1)

Comparing performance of: matches vs closest vs classList vs querySelector

Created: 3 months ago by: Guest

Jump to the latest result

matches

closest

classList

querySelector

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):