Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
jQuery hasClass vs vanilla JS classList.contains
(version: 0)
Comparing performance of:
jQuery hasClass vs Vanilla JS classList.contains
Created:
6 years ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
jQuery hasClass
Vanilla JS classList.contains
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=608321" width="100%" height="500px"></iframe>
Vanilla JS classList.contains
14.9M/s
jQuery hasClass
3.5M/s
View exact numbers
Test name
Executions per second
✓
Vanilla JS classList.contains
14,869,929 Ops/sec
jQuery hasClass
3,531,538 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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 addClass vs classList.add
jquery vs js classList
Comments
Confirm delete:
Do you really want to delete benchmark?