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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 3 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.0 Ops/sec
Dry RegExp	1154993.0 Ops/sec
indexOf	4177221.0 Ops/sec
classList	3525023.0 Ops/sec
hasClassString	2540449.0 Ops/sec
indexOf more than operator	4210654.0 Ops/sec

$.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: 3 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