Benchmark: matches vs. closest vs. classList (with element tag check) 2

HTML Preparation code:

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

Tests:

matches
var element = document.querySelector(".foo"); var i = 1000; while (i--) { if (!element.matches("div.foo")) { throw new Error("check failed"); } }
closest
var element = document.querySelector(".foo"); var i = 1000; while (i--) { if (!element.closest("div.foo")) { throw new Error("check failed"); } }
classList (with nodeName)
var element = document.querySelector(".foo"); var i = 1000; while (i--) { if (!(element.nodeName === "DIV" && element.classList.contains("foo"))) { throw new Error("check failed"); } }
classList (with tagName)
var element = document.querySelector(".foo"); var i = 1000; var className = "foo"; while (i--) { if (!(element.tagName === "DIV" && element.classList.contains("foo"))) { throw new Error("check failed"); } }
classList (with instanceof)
var element = document.querySelector(".foo"); var i = 1000; while (i--) { if (!(element instanceof HTMLDivElement && element.classList.contains("foo"))) { throw new Error("check failed"); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
matches
closest
classList (with nodeName)
classList (with tagName)
classList (with instanceof)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 121 on Windows

View result in a separate tab

Test name	Executions per second
matches	3927.6 Ops/sec
closest	3498.2 Ops/sec
classList (with nodeName)	2303.1 Ops/sec
classList (with tagName)	2072.3 Ops/sec
classList (with instanceof)	1506.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

The benchmark is testing four different approaches to check if an HTML element has a specific class or tag:

1. `matches()`: Using the `matches()` method, which returns a boolean indicating whether the element matches a given CSS selector.
2. `closest()`: Using the `closest()` method, which returns the closest ancestor element that matches a given CSS selector.
3. `classList (with nodeName)`: Using the `classList` property and checking if the node name is equal to `"DIV"` and the class contains `"foo"`.
4. `classList (with tagName)`: Using the `classList` property and checking if the tag name is equal to `"DIV"` and the class contains `"foo"`.
5. `classList (with instanceof)`: Using the `instanceof` operator to check if the element is an instance of `HTMLDivElement` and the class contains `"foo"`.

The benchmark is comparing the performance of these five approaches on a specific HTML element with a class of `"foo"`.

Now, let's discuss the pros and cons of each approach:

1. `matches()`: This method is often faster than the other approaches because it uses an internal implementation that doesn't require parsing the CSS selector. However, it may not be as accurate if the CSS selector is complex or contains wildcards.
2. `closest()`: This method can be slower than `matches()` because it needs to traverse the DOM tree to find the closest ancestor element that matches the selector. However, it's often more accurate and can handle more complex selectors.
3. `classList (with nodeName)`: This approach is likely to be slowest of all because it requires two separate checks: one for the node name and one for the class. However, it may be useful if you need to perform these checks together in a single step.
4. `classList (with tagName)`: Similar to the previous approach, this method will also require two separate checks, making it slower than `matches()` or `closest()`.
5. `classList (with instanceof)`: This approach is likely to be slowest because it requires an instance check and may not be as accurate if the element is not an instance of `HTMLDivElement`.

Other considerations:

* The benchmark doesn't account for edge cases, such as elements with multiple classes or nested selectors.
* The benchmark only tests the performance of these five approaches on a specific HTML element with a class of `"foo"`. It would be interesting to see how these approaches perform on other types of elements or selectors.

Alternatives:

* For simple selectors, you could use the `RegExp` API to check if the element matches the selector. This approach is often faster than `matches()` but may require more effort to implement.
* For complex selectors, you might consider using a CSS parser library like `cssselect` to parse and evaluate the selector.

In summary, while there are pros and cons to each approach, `matches()` and `closest()` are generally the fastest and most accurate ways to check if an HTML element has a specific class or tag. However, depending on your use case, you may need to consider other factors such as accuracy, edge cases, and performance.

Related benchmarks:

matches vs. closest vs. classList (with element tag check) 2 (version: 0)

Comparing performance of: matches vs closest vs classList (with nodeName) vs classList (with tagName) vs classList (with instanceof)

Created: one year ago by: Guest

Jump to the latest result

matches

closest

classList (with nodeName)

classList (with tagName)

classList (with instanceof)

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