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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

Fastest: N/A

Slowest: N/A

No previous run results

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