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
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: 2 years ago)

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

Browser/OS: Chrome 108 on Windows

View result in a separate tab

Test name	Executions per second
$.hasClass	1555074.4 Ops/sec
RegExp	6129624.5 Ops/sec
Dry RegExp	2058927.2 Ops/sec
indexOf	7183683.0 Ops/sec
classList	5611249.0 Ops/sec
hasClassString	4318179.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of different approaches to check if an HTML element has a specific class. The test cases compare four methods:

1. `$.hasClass` (JQuery's class helper function)
2. `RegExp`
3. `classList` (JavaScript's built-in class list API)
4. A custom implementation, ` HasanClassString`

**Options Comparison**

Here's a brief overview of each option and its pros and cons:

### 1. `$.hasClass`

*   Uses the jQuery library to access the element's class name.
*   Pros: Easy to use, widely supported, and well-tested.
*   Cons: Requires including an additional JavaScript library (jQuery), which might not be desirable for all projects.

### 2. `RegExp`

*   Uses a regular expression to match the class name at the beginning and end of the element's class list.
*   Pros: Fast, lightweight, and doesn't require any external libraries.
*   Cons: Requires manual handling of edge cases (e.g., class names with spaces), and its performance can degrade for elements with long class lists.

### 3. `classList`

*   Uses the JavaScript built-in class list API to access the element's class list.
*   Pros: Fast, modern, and doesn't require any external libraries.
*   Cons: Not supported in older browsers or those that don't have the latest versions of JavaScript enabled.

### 4. `HasanClassString`

*   A custom implementation using a string manipulation function to check for the class presence.
*   Pros: Can be optimized for specific use cases, and might be more accurate than regular expressions.
*   Cons: Requires manual optimization, testing, and maintenance, which can add complexity.

**Library Used**

The `$.hasClass` option uses jQuery, a popular JavaScript library for DOM manipulation and event handling. It provides a convenient way to access the element's class list without requiring manual string manipulation or regular expressions.

**Special JS Feature/Syntax**

None of the test cases explicitly use any special JavaScript features or syntax. However, it's worth noting that modern browsers support the `classList` API and JavaScript methods like `includes()`, which might be used in future optimizations or enhancements.

**Alternatives**

Other alternatives for checking class presence include:

*   Using a vanilla JavaScript approach with string manipulation functions (e.g., `indexOf()`, `substr()`, etc.).
*   Leveraging the CSS `:class` pseudo-class to check for classes programmatically.
*   Utilizing third-party libraries like Lodash or Moment.js, which provide utility functions for working with data and DOM elements.

Keep in mind that these alternatives might have different performance characteristics, complexity, and compatibility requirements compared to the test cases.

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