Benchmark: jQuery hasClass vs jQuery 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");
jQuery classList.contains
$("#el")[0].classList.contains("test");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery hasClass
jQuery classList.contains

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 12; M2103K19G) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Mobile Safari/537.36 OPR/64.1.3282.59829

Browser/OS: Opera Mobile 64 on Android

View result in a separate tab

Test name	Executions per second
jQuery hasClass	300639.3 Ops/sec
jQuery classList.contains	519114.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark definition and explain what's being tested, the options compared, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark is designed to compare two approaches for checking if an HTML element has a specific class using jQuery: `hasClass` and `classList.contains`.

**Options Compared**

1. **jQuery `hasClass`**: This method checks if the element has the specified class by comparing the element's class list with the class name.
2. **jQuery `classList.contains`**: This method checks if the element contains the specified class by searching for the class in the element's class list.

**Pros and Cons**

* jQuery `hasClass`:
	+ Pros: Simple, widely supported, and efficient (since it only searches for the exact match).
	+ Cons: Can be slower since it involves string comparison.
* jQuery `classList.contains`:
	+ Pros: More flexible (can search for multiple classes), faster than `hasClass`, and more efficient (since it uses a binary search algorithm under the hood).
	+ Cons: May be slower in some cases due to the overhead of creating a class list, and may not work as expected when dealing with custom attributes.

**Library Used**

The benchmark uses jQuery, which is a popular JavaScript library for DOM manipulation and event handling. In this case, it's used for its `hasClass` and `classList.contains` methods, which provide a convenient way to check if an element has a specific class.

**Special JS Feature or Syntax (None)**

There are no special JavaScript features or syntax used in this benchmark.

**Other Considerations**

* **Browser support**: The benchmark is designed to run on various browsers, including mobile and desktop versions.
* **Performance optimization**: The benchmark aims to provide accurate results by optimizing the execution time of each test case.
* **Comparison metrics**: The benchmark reports the number of executions per second (ExecutionsPerSecond) for each browser, which can be used to compare the performance of the two approaches.

**Alternatives**

If you want to write your own benchmarking code or use a different library, here are some alternatives:

1. **V8 Benchmark Suite**: A set of benchmarks designed to measure the performance of JavaScript engines.
2. **jsPerf**: A web-based benchmarking tool that allows you to compare the performance of JavaScript code in various browsers.
3. **BenchmarkDotNet**: A .NET library for benchmarking and measuring performance.

Keep in mind that each benchmarking framework has its own strengths and weaknesses, so it's essential to choose the one that best fits your specific use case.

Related benchmarks:

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

Comparing performance of: jQuery hasClass vs jQuery classList.contains

Created: 5 years ago by: Guest

Jump to the latest result

jQuery hasClass

jQuery classList.contains

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