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

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

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