Benchmark: $.hasClass vs RegExp vs indexOf vs classList

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div class="foobar" id="node">Hello</div>

Script Preparation code:

var node = document.getElementById('node');
var className = node.className;
var rx = new RegExp('\\b' + className + '\\b');
function hasClassString(e, c) {
  var s = e.className, i = s.indexOf(c);
  return i != -1 && (s.charCodeAt(i - 1) || 32) == 32 && (s.charCodeAt(i + c.length) || 32) == 32;
};

Tests:

$.hasClass
var hasClass = $(node).hasClass(className);
RegExp
var hasClass = rx.test(node.className);
Dry RegExp
var drx = new RegExp('\\b' + className + '\\b'); var hasClass = drx.test(node.className);
indexOf
if(!node.className || !className){ return false; } var hasClass = node.className.indexOf(className) !== -1;
classList
var hasClass = node.classList.contains(className);
hasClassString
var hasClass = hasClassString(node, className);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
$.hasClass
RegExp
Dry RegExp
indexOf
classList
hasClassString

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2025 years ago)

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

Browser/OS: Chrome 63 on Windows

View result in a separate tab

Test name	Executions per second
$.hasClass	716803.6 Ops/sec
RegExp	3811661.2 Ops/sec
Dry RegExp	1227489.6 Ops/sec
indexOf	2158378.8 Ops/sec
classList	3149558.2 Ops/sec
hasClassString	2463561.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark and explain what's being tested.

**Benchmark Overview**

MeasureThat.net is testing the performance of four different approaches to check if an HTML element has a certain class:

1. `$.hasClass` (jQuery method)
2. `RegExp`
3. `indexOf` (String method)
4. `classList` (Native DOM method)
5. `hasClassString` (Custom implementation)

The benchmark uses JavaScript and HTML to prepare the test cases.

**Approach 1: `$.hasClass`**

This approach uses jQuery's `hasClass` method, which is a wrapper around the native DOM method `classList.contains`. This method checks if an element has a specific class by iterating through all classes of the element and checking if the target class is among them.

Pros:

* Convenient and easy to use
* Works on older browsers that don't support `classList`

Cons:

* Uses jQuery, which may not be included in every project's dependencies
* May have overhead due to the DOM manipulation

**Approach 2: `RegExp`**

This approach uses a regular expression to match the target class. The pattern `\b` is used to match word boundaries, and the class name is inserted into the pattern.

Pros:

* Lightweight and fast
* Works on most browsers that support regex

Cons:

* May not be as readable or maintainable due to the regex syntax
* Can be slower than native DOM methods for large datasets

**Approach 3: `indexOf`**

This approach uses the `indexOf` method to search for the target class in the element's class list.

Pros:

* Fast and lightweight
* Works on most browsers that support `indexOf`

Cons:

* May not be as readable or maintainable due to the use of indexing
* Can be slower than native DOM methods for large datasets

**Approach 4: `classList`**

This approach uses the native DOM method `classList.contains` to check if an element has a specific class.

Pros:

* Fast and lightweight
* Works on modern browsers that support `classList`
* Readable and maintainable

Cons:

* May not work on older browsers that don't support `classList`

**Approach 5: `hasClassString`**

This approach is a custom implementation of the `hasClass` method using string manipulation.

Pros:

* Lightweight and fast
* Works on most browsers that support string methods

Cons:

* May not be as readable or maintainable due to the custom implementation
* Can be slower than native DOM methods for large datasets

**Library: jQuery**

jQuery is a JavaScript library that provides a convenient way to manipulate the DOM and perform common tasks, such as event handling and animation. The `hasClass` method uses jQuery's internal implementation of the `classList` method.

**Special JS feature or syntax**

There are no special features or syntaxes being used in this benchmark beyond standard JavaScript and HTML.

**Other alternatives**

If you're interested in exploring alternative approaches, here are a few options:

* Use the `classList` API (native DOM method) instead of jQuery's `hasClass`
* Implement your own class list management using string manipulation
* Use a library like Lodash or Ramda to provide a more functional programming approach

Related benchmarks:

$.hasClass vs RegExp vs indexOf vs classList (version: 0)

Comparing performance of: $.hasClass vs RegExp vs Dry RegExp vs indexOf vs classList vs hasClassString

Created: 6 years ago by: Guest

Jump to the latest result

$.hasClass

RegExp

Dry RegExp

indexOf

classList

hasClassString

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