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

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is defined in two parts: a JSON object that contains information about the benchmark, and an array of test cases. The JSON object defines the following:

* `Name`: A human-readable name for the benchmark.
* `Description`: An empty string, indicating that no description is provided for this benchmark.
* `Script Preparation Code`: A JavaScript code snippet that sets up the necessary variables for the benchmark. In this case, it:
	+ Retrieves an HTML element with the id "node" and stores its class name in a variable called `className`.
	+ Creates a new regular expression (RegExp) object using the stored class name.
	+ Defines a function called `hasClassString` that checks if a given string is a subclass of another string. This function uses the `indexOf` method to search for the substring and then checks if the surrounding characters are word boundaries.

**Test Cases**

The array of test cases defines six different ways to check if an element has a specific class:

1. `$(.hasClass)`: Uses jQuery's `.hasClass()` method to check if the element has the specified class.
2. `RegExp`: Creates a new RegExp object and uses its `test()` method to check if the element's class name matches the pattern.
3. `Dry RegExp`: Similar to the previous one, but without the word boundary assertion (`\\b`).
4. `indexOf`: Uses the `indexOf()` method to search for the substring in the element's class name.
5. `classList`: Uses the `classList` property of HTML elements to check if the specified class is present.
6. `hasClassString`: The custom function defined in the script preparation code, which uses the `indexOf` method to search for the substring and then checks if the surrounding characters are word boundaries.

**Library and Special Features**

* jQuery: Used by the `$(.hasClass)` test case. jQuery provides a convenient way to work with HTML elements and manipulate their classes.
* RegExp: Used by the `RegExp` and `Dry RegExp` test cases. Regular expressions are a powerful way to match patterns in strings, but can be complex and error-prone.

**Other Considerations**

When evaluating these different approaches, we need to consider factors such as:

* Performance: How fast does each method execute?
* Accuracy: Are the results accurate for all possible class names and element types?
* Readability: How easy is it to understand and maintain the code?

**Alternatives**

If you're interested in exploring alternative methods or optimizing the existing implementation, here are a few suggestions:

* Use a library like Lodash or Underscore.js, which provide more efficient and flexible ways to manipulate arrays and objects.
* Consider using a more modern approach, such as using the `includes()` method instead of `indexOf()`.
* Look into alternative ways to check for class presence, such as using the `matches` property of HTML elements.

Keep in mind that these are just suggestions, and it's essential to evaluate each option based on your specific use case and performance requirements.

Latest run results:

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

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

Browser/OS: Chrome 70 on Windows

View result in a separate tab

Test name	Executions per second
$.hasClass	783557.1 Ops/sec
RegExp	3408844.8 Ops/sec
Dry RegExp	1088372.2 Ops/sec
indexOf	2107121.2 Ops/sec
classList	2888158.5 Ops/sec
hasClassString	2635762.2 Ops/sec

Related benchmarks:

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

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

Created: 6 years ago by: Registered User

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 26 days ago):