Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
matches vs. closest vs. classList vs tagName
(version: 0)
Comparing performance of:
matches vs closest vs classList vs matches tagname vs tagName
Created:
4 years ago
by:
Guest
Jump to the latest result
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>
Run tests (5)
Previous results
Fork
Test case name
Result
matches
closest
classList
matches tagname
tagName
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one month 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
Embed
Embed Benchmark Result
Test name
Executions per second
matches
6446.0 Ops/sec
closest
5359.8 Ops/sec
classList
7690.9 Ops/sec
matches tagname
7398.1 Ops/sec
tagName
10341.5 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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:
classList.contains() vs closest() performance
matches vs. closest vs. classList (with element tag check)
matches vs. closest vs. classList (with element tag check) 2
querySelector(class) vs classList.some
querySelector vs classList.contains
Comments
Confirm delete:
Do you really want to delete benchmark?