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 $node = $(node);
var rx = new RegExp('\\bfoobar\\b');
var rx2 = new RegExp('(^| )foobar( |$)', 'gi');
var rx3 = new RegExp('(^| )foobar( |$)');
var rx4 = new RegExp('(^| )foobar( |$)', 'g');
var rx5 = new RegExp('(^| )foobar( |$)', 'i');
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('foobar');
RegExp
var hasClass = rx.test(node.className);
Dry RegExp
var drx = new RegExp('\\bfoobar\\b'); var hasClass = drx.test(node.className);
indexOf
var hasClass = (" " + node.className + " ").indexOf(" foobar ") !== -1;
classList
var hasClass = node.classList.contains('foobar');
hasClassString
var hasClass = hasClassString(node, 'foobar');
RegExp 2
var hasClass = rx2.test(node.className)
RegExp 3
var hasClass = rx3.test(node.className)
RegExp 4
var hasClass = rx4.test(node.className)
RegExp 5
var hasClass = rx4.test(node.className)
indexOf simplest
var hasClass = (node.className).indexOf("foobar") !== -1;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
$.hasClass
RegExp
Dry RegExp
indexOf
classList
hasClassString
RegExp 2
RegExp 3
RegExp 4
RegExp 5
indexOf simplest

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/87.0.4280.66 Safari/537.36

Browser/OS: Chrome 87 on Windows

View result in a separate tab

Test name	Executions per second
$.hasClass	506538.8 Ops/sec
RegExp	723947.7 Ops/sec
Dry RegExp	348754.1 Ops/sec
indexOf	1679394.6 Ops/sec
classList	1998981.9 Ops/sec
hasClassString	1002785.7 Ops/sec
RegExp 2	1199511.9 Ops/sec
RegExp 3	871022.4 Ops/sec
RegExp 4	1015889.2 Ops/sec
RegExp 5	1092445.0 Ops/sec
indexOf simplest	3336766.8 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 is being tested.

The benchmark compares different methods for checking if an HTML element has a specific class:

1. `$.hasClass`: Uses jQuery to check if an element has a specific class.
2. `RegExp`: Uses regular expressions to search for the class in the element's `className` property.
3. `indexOf`: Uses the `indexOf()` method of the string to find the index of the class in the `className` property and checks if it's -1 (indicating not found).
4. `hasClassString`: A custom implementation that uses a similar approach to `RegExp`, but is optimized for performance.
5. `Dry RegExp`: Similar to `hasClassString`, but with some additional optimizations.

The benchmark measures the execution time of each method on various browsers and devices, providing insights into their relative performance.

Here's a summary of the results:

* `$.hasClass` is generally the slowest due to its reliance on jQuery.
* `indexOf` is also relatively slow because it requires string search.
* The optimized implementations (`hasClassString` and `Dry RegExp`) are significantly faster, likely due to their use of internal optimizations or caching.
* `RegExp` falls somewhere in between, but still slower than the optimized implementations.

The results suggest that using a custom implementation like `hasClassString` can provide significant performance benefits over relying on jQuery or other libraries. Regular expressions can be effective for this purpose, but may not offer the same level of optimization as the custom implementation.

Related benchmarks:

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

Fork

Comparing performance of: $.hasClass vs RegExp vs Dry RegExp vs indexOf vs classList vs hasClassString vs RegExp 2 vs RegExp 3 vs RegExp 4 vs RegExp 5 vs indexOf simplest

Created: 6 years ago by: Registered User

Jump to the latest result

$.hasClass

RegExp

Dry RegExp

indexOf

classList

hasClassString

RegExp 2

RegExp 3

RegExp 4

RegExp 5

indexOf simplest

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