Benchmark: matches vs. closest vs. classList vs tagName

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"); }
matches tagname
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.matches("div"); }
tagName
var element = document.querySelector(".foo"); var i = 1000; while (i--) { element.tagName.toLowerCase() == "div"; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
matches
closest
classList
matches tagname
tagName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 145 on Android

View result in a separate tab

tagName

10K/s

classList

8K/s

matches tagname

7K/s

matches

6K/s

closest

5K/s

View exact numbers

Test name	Executions per second
✓ tagName	10,341 Ops/sec
classList	7,691 Ops/sec
matches tagname	7,398 Ops/sec
matches	6,446 Ops/sec
closest	5,360 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is being tested in this benchmark and compare the different approaches.

**Test Purpose:**

The test aims to measure the performance of four different methods to check if an HTML element matches or contains a certain class, tag name, or attribute value. The test cases are designed to be independent and focus on the specific method being compared.

**Methods Compared:**

1. **`element.matches()`**: This method is part of the DOM (Document Object Model) API and allows checking if an element matches a given CSS selector.
2. **`element.closest()`**: This method is also part of the DOM API and returns the closest ancestor node that matches a given CSS selector.
3. **`element.classList.contains()`**: This method checks if a class contains a specific value.
4. **Tag Name Comparison (`element.tagName.toLowerCase() == "div"`)**: This approach directly compares the tag name of an element with a hardcoded string.

**Pros and Cons:**

1. `element.matches()`:
	* Pros: Fast, lightweight, and widely supported across browsers.
	* Cons: Can be slower than other methods if the selector is complex or matches multiple elements.
2. `element.closest()`:
	* Pros: Fast and efficient for finding a single ancestor node.
	* Cons: May not work as expected in certain scenarios (e.g., when the element has no ancestors).
3. `element.classList.contains()`:
	* Pros: Simple and fast, with good browser support.
	* Cons: May be slower than `matches()` or `tagName` comparison for complex class names or tag names.
4. Tag Name Comparison (`element.tagName.toLowerCase() == "div"`):
	* Pros: Fast and lightweight, but requires a hardcoded string for the tag name.
	* Cons: Less flexible and may not work correctly if the element's tag name changes dynamically.

**Library Used:**

None explicitly mentioned in the provided benchmark definition. However, some browsers might use additional libraries or optimizations that are not part of the standard DOM API.

**Special JS Features/Syntax:**

Not explicitly mentioned in this benchmark, but it's worth noting that `element.matches()` and `element.closest()` rely on CSS selectors, which can be complex and may require careful consideration to avoid performance issues.

**Alternatives:**

If you need to check for class presence or tag name equality in a different context, consider using:

* `document.querySelector()` with a CSS selector.
* `RegExp.test()` for more complex pattern matching.
* Native browser methods like `Element.prototype.contains()` (for class presence) or `Element.prototype.tagName` (for tag name comparison).

Keep in mind that the choice of method depends on the specific requirements and performance constraints of your application.

matches vs. closest vs. classList vs tagName (version: 0)

Comparing performance of: `matches vs closest vs classList vs matches tagname vs tagName`

Created: 5 years ago by: Guest

Go to the latest result

matches

closest

classList

matches tagname

tagName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

matches vs. closest vs. classList vs tagName (version: 0)

Comparing performance of: matches vs closest vs classList vs matches tagname vs tagName

Created: 5 years ago by: Guest

Go to the latest result

matches

closest

classList

matches tagname

tagName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `matches vs closest vs classList vs matches tagname vs tagName`