Benchmark: matches vs. hasClass vs. classList

HTML Preparation code:

<div class="foo"></div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
matches
hasClass
classList

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 137 on Windows

View result in a separate tab

Test name	Executions per second
matches	27891.8 Ops/sec
hasClass	3108.8 Ops/sec
classList	33554.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark measures the performance of three different methods to check if an HTML element has a specific class: `matches()`, `hasClass()`, and `classList.contains()`.

**Options Compared**

1. **`element.matches("foo")`**: This method is part of the DOM API introduced in ECMAScript 2015 (ES6). It checks if the given string matches any class name on the element.
2. **`$(element).hasClass("foo")`**: This method is a jQuery extension that checks if an element has a specific class using the `hasClass()` method.
3. **`element.classList.contains("foo")`**: This method is also part of the DOM API introduced in ECMAScript 2015 (ES6). It returns a boolean indicating whether the element contains any matching class.

**Pros and Cons**

1. **`element.matches("foo")`**:
	* Pros: Fast, lightweight, and modern.
	* Cons: Not supported by older browsers, requires ES6 support.
2. **`$(element).hasClass("foo")`**:
	* Pros: Wide browser support (jQuery is a polyfill), easy to use.
	* Cons: Adds unnecessary overhead due to jQuery's internal workings, slower than native DOM methods.
3. **`element.classList.contains("foo")`**:
	* Pros: Fast, lightweight, and modern, with good browser support.
	* Cons: Requires ES6 support.

**Library: jQuery**

In the provided benchmark, jQuery is used in the `hasClass()` test case. jQuery is a popular JavaScript library that provides an easy-to-use API for DOM manipulation and event handling. The `hasClass()` method is a part of jQuery's API, which checks if an element has a specific class.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntaxes used in this benchmark. However, the use of ES6 methods like `matches()`, `classList.contains()`, and the requirement for ES6 support are worth noting.

**Other Alternatives**

If you don't want to use jQuery or require ES6 support, you can consider other alternatives:

1. **Vanilla DOM methods**: Use native DOM methods like `element.indexOf("foo")` or `element.substring(0, element.indexOf(" ")).split()[1]` to check if an element has a specific class.
2. **Other libraries**: Consider using alternative libraries like Lodash or Ramda for utility functions that can simplify your code and provide better performance.

In summary, the choice between these options depends on your project's requirements, target audience, and performance considerations. If you need modern, fast, and lightweight solutions with good browser support, `element.matches("foo")` and `element.classList.contains("foo")` are excellent choices. For wider browser support and ease of use, jQuery's `hasClass()` method might be a better fit, although it adds overhead compared to native DOM methods.

Related benchmarks:

matches vs. hasClass vs. classList (version: 0)

Comparing performance of: matches vs hasClass vs classList

Created: 2 years ago by: Guest

Jump to the latest result

matches

hasClass

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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