Benchmark: jQuery hasClass vs vanilla JS classList.contains

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="el" class="test"></div>

Tests:

jQuery hasClass
$("#el").hasClass("test");
Vanilla JS classList.contains
document.getElementById("el").classList.contains("test");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery hasClass
Vanilla JS classList.contains

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Browser/OS: Chrome 136 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
jQuery hasClass	3531538.2 Ops/sec
Vanilla JS classList.contains	14869929.0 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 explanation of the provided benchmark.

**Benchmark Overview**

The test compares the performance of two approaches: using jQuery's `hasClass` method and vanilla JavaScript's `classList.contains` method to check if an element has a certain class.

**Options Compared**

Two options are compared:

1. **jQuery's `hasClass` method**: This method is part of the jQuery library, which provides a convenient way to manipulate HTML documents, events, and DOM elements.
2. **Vanilla JavaScript's `classList.contains` method**: This method is part of the ECMAScript Standardized Specification, introduced in modern browsers (from around 2016 onwards), and allows direct access to an element's class list.

**Pros and Cons**

1. **jQuery's `hasClass` method**:
	* Pros: Easy to use, widely supported, and well-documented.
	* Cons: Adds extra overhead due to the jQuery library, which may not be desirable for smaller projects or performance-critical code.
2. **Vanilla JavaScript's `classList.contains` method**:
	* Pros: Native to modern browsers, no additional library required, and more efficient in terms of execution time.
	* Cons: May require knowledge of newer JavaScript features and syntax.

**Library (jQuery)**

jQuery is a popular JavaScript library that simplifies DOM manipulation, event handling, and Ajax interactions. It provides an easy-to-use API for selecting elements, event handling, and manipulating the DOM. In this benchmark, jQuery's `hasClass` method is used to check if an element has a certain class.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax used in this benchmark. Both approaches rely on standard JavaScript functionality.

**Benchmark Preparation Code**

The HTML preparation code includes a link to the jQuery library (version 3.2.1) and creates a simple `<div>` element with an ID of "el" and a class of "test".

**Test Cases**

Two test cases are defined:

1. **jQuery hasClass**: This test case uses jQuery's `hasClass` method to check if the element with ID "el" has the class "test".
2. **Vanilla JS classList.contains**: This test case uses vanilla JavaScript's `classList.contains` method to achieve the same result.

**Latest Benchmark Result**

The latest benchmark results show that Opera Mobile 64 (a mobile browser) performs better with the vanilla JavaScript approach, executing approximately 1156166 tests per second, compared to around 308651 tests per second for jQuery. However, this difference might not be significant in all scenarios, and other factors like system resources, network conditions, or specific hardware configurations can impact performance.

**Other Alternatives**

For similar benchmarks, you may want to explore:

* Other JavaScript libraries like Lodash or Underscore.js
* Modern alternative implementations of the `classList` API (e.g., using the `ElementMasks` API)
* Browser-specific APIs for class manipulation (e.g., Chrome's `CSSClassList` API)

Keep in mind that these alternatives may have different performance characteristics, ease of use, and compatibility with various browsers and environments.

Related benchmarks:

jQuery hasClass vs vanilla JS classList.contains (version: 0)

Comparing performance of: jQuery hasClass vs Vanilla JS classList.contains

Created: 5 years ago by: Guest

Jump to the latest result

jQuery hasClass

Vanilla JS classList.contains

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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