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"); }

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 14 runs

classList

28K/s

matches

23K/s

hasClass

3K/s

Fastest: classList (9.8x faster)

View exact numbers

✓ classList: 27,876 ops/sec
• matches: 22,502 ops/sec
• hasClass: 2,841 ops/sec

Firefox 5 runs

classList

1.2M/s

matches

16K/s

hasClass

4K/s

Fastest: classList (280.1x faster)

View exact numbers

✓ classList: 1,204,711 ops/sec
• matches: 16,337 ops/sec
• hasClass: 4,302 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year 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

classList

34K/s

matches

28K/s

hasClass

3K/s

View exact numbers

Test name	Executions per second
✓ classList	33,555 Ops/sec
matches	27,892 Ops/sec
hasClass	3,109 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.

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

Comparing performance of: `matches vs hasClass vs classList`

Created: 3 years ago by: Guest

Go to the latest result

matches

hasClass

classList

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 14 runs

Firefox 5 runs

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. hasClass vs. classList (version: 0) Benchmark.js

Comparing performance of: matches vs hasClass vs classList

Created: 3 years ago by: Guest

Go to the latest result

matches

hasClass

classList

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 14 runs

Firefox 5 runs

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 hasClass vs classList`