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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Browser/OS: Chrome 104 on Windows

View result in a separate tab

Test name	Executions per second
matches	20388.9 Ops/sec
closest	19497.7 Ops/sec
classList	23673.5 Ops/sec
matches tagname	24707.6 Ops/sec
tagName	59911.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

matches

closest

classList

matches tagname

tagName

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):