Benchmark: $.hasClass vs RegExp vs indexOf vs classList 2

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);
indexOf more than operator
var hasClass = node.className.indexOf(className) > -1;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 84 on Windows

View result in a separate tab

Test name	Executions per second
$.hasClass	786190.6 Ops/sec
RegExp	3424062.2 Ops/sec
Dry RegExp	1154993.4 Ops/sec
indexOf	4177220.5 Ops/sec
classList	3525022.8 Ops/sec
hasClassString	2540448.8 Ops/sec
indexOf more than operator	4210653.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, comparing different approaches to test various aspects of the language. In this explanation, we will break down the provided benchmark definition and individual test cases, discussing what each option tests, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark definition is a JSON object that describes the benchmark being run:
```json
{
    "Name": "$.hasClass vs RegExp vs indexOf vs classList 2",
    "Description": null,
    "Script Preparation Code": ...,
    "Html Preparation Code": ...
}
```
This benchmark tests four different approaches to check if an element has a specific class:

1. `$ .hasClass` (jQuery method)
2. `RegExp` (regular expression)
3. `indexOf` (string indexing)
4. `classList` (DOM API)

**Individual Test Cases**

Each test case is defined in the "Benchmark Definition" JSON object:
```json
[
    {
        "Benchmark Definition": "...",
        "Test Name": "$.hasClass"
    },
    ...
]
```
Here's a brief explanation of each test case:

1. `$ .hasClass` (jQuery method)
	* This test case uses jQuery to check if an element has the specified class.
2. `RegExp` (regular expression)
	* This test case uses a regular expression to match the class name in the element's `className` property.
3. `Dry RegExp`
	* This test case is similar to the previous one but creates a new regular expression object instead of compiling it.
4. `indexOf`
	* This test case uses string indexing to find the index of the class name in the element's `className` property.
5. `classList`
	* This test case uses the DOM API to check if the element has the specified class.
6. `hasClassString`
	* This test case is similar to `$ .hasClass`, but it's defined in a separate function.
7. `indexOf more than operator`
	* This test case is similar to `indexOf` but uses the "more than" operator ( `> -1` ) instead of checking for equality.

**Options Compared**

The four main options being compared are:

1. `$ .hasClass` vs `RegExp`
	* jQuery's `hasClass` method is generally faster and more efficient than using regular expressions.
2. `indexOf` vs `classList`
	* The DOM API's `classList.contains()` method is faster and more accurate than using string indexing (`indexOf`).
3. Regular expression vs `Dry RegExp`
	* Creating a new regular expression object ( `Dry RegExp` ) does not provide any significant performance benefits over compiling it.

**Pros and Cons**

Here are some pros and cons for each option:

1. `$ .hasClass`
	* Pros: Fast, efficient, and widely supported.
	* Cons: Dependent on jQuery library.
2. `RegExp`
	* Pros: Flexible and powerful, but can be slower due to overhead.
	* Cons: Regular expressions can be complex and error-prone.
3. `indexOf`
	* Pros: Simple and lightweight, but may not be accurate in some cases.
	* Cons: Can be slower than other options.
4. `classList`
	* Pros: Fast, efficient, and accurate, with good browser support.
	* Cons: Requires modern browsers.

**Other Considerations**

1. **Browser Support**: The benchmark only includes results for Chrome 84 on Windows. Other browsers may have different performance characteristics.
2. **Library Dependency**: Some tests (e.g., `$ .hasClass` and `classList`) rely on external libraries (jQuery or DOM API), which can impact performance.
3. **Regular Expressions**: While regular expressions are powerful, they can be complex and error-prone, especially for beginners.

In conclusion, this benchmark highlights the importance of considering performance, accuracy, and browser support when choosing an approach to test class presence in JavaScript elements.

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

$.hasClass

RegExp

Dry RegExp

indexOf

classList

hasClassString

indexOf more than operator

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