Benchmark: classList.contains vs. Set vs regex

HTML Preparation code:

<div id="foo" class="bang zoom boom dang kazam hallabalooza foo didgeridoo bar baz ding dong skill skull bip bop"></div>

Script Preparation code:

var test_element = document.getElementById("foo");

Tests:

Use hasClass shorthand
function hasClass(element, classes) { var classesSet = new Set(element.classList) classes = classes.split(' '); for (var i = 0; i < classes.length; i++) { if (!classesSet.has(classes[i])) { return false; } } return true; }; hasClass(test_element, "bang zoom boom dang kazam hallabalooza foo didgeridoo bar baz ding dong skill skull bip bop");
Use classList
test_element.classList.contains("bar"); test_element.classList.contains("baz");
Use classname match
test_element.className.match('bar'); test_element.className.match('baz');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Use hasClass shorthand
Use classList
Use classname match

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 15 days ago)

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

Browser/OS: Chrome 147 on Windows

View result in a separate tab

Test name	Executions per second
Use hasClass shorthand	550654.1 Ops/sec
Use classList	18932222.0 Ops/sec
Use classname match	3757172.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and test cases to understand what is being tested, compared, and their pros and cons.

**Benchmark Definition:**

The benchmark definition measures the performance of three different methods to check if an element has a specific class:

1. `hasClass` shorthand (using `element.classList`)
2. `classList` (directly calling `test_element.classList.contains('class_name')`)
3. `classname match` (using `element.className.match('class_name')`)

**Options Compared:**

* **` HasanClass` shorthand**: This method uses the `element.classList` property to get a Set of classes for the element and then checks if each class in the input array is present using the `has()` method. It's a concise way to check for class presence.
	+ Pros:
		- Easy to read and write
		- Efficient, as it uses a Set data structure internally
	+ Cons:
		- May be slower due to the extra function call and potential overhead of creating a new Set object
* **`classList`**: This method directly calls `test_element.classList.contains('class_name')`, which is a simple and straightforward way to check for class presence.
	+ Pros:
		- Fast, as it only requires a single function call and no additional data structure creation
	+ Cons:
		- Less readable than the `hasClass` shorthand method
* **`classname match`**: This method uses regular expressions to search for the class name in the element's `className` property.
	+ Pros:
		- Fast, as it only requires a single function call and no additional data structure creation
	+ Cons:
		- Less readable and less maintainable than the other two methods

**Library:**

None of these test cases use any external libraries. However, they do rely on standard JavaScript features like `document`, `element` (assumed to be a DOM element), and regular expressions (`RegExp`).

**Special JS Features/Syntax:**

The `classList` property is a feature introduced in ECMAScript 2017 (ES7). It allows elements to store and retrieve classes using a more convenient API. The `hasClass` shorthand method relies on this feature.

**Test Results:**

According to the latest benchmark result, the `classList` method performs best with an execution rate of approximately 1.17 million iterations per second. This is likely due to its simplicity and minimal overhead compared to the other two methods.

If you're interested in alternative approaches or optimizing performance for class-based checks, some possible alternatives include:

* Using a library like Lodash (with its `includes` function) or Ramda (with its `includes` function) to check for class presence.
* Implementing custom class checking using bitwise operations or bitwise masking.
* Utilizing more advanced techniques like caching or memoization to optimize performance.

However, these alternatives might come with additional complexity and potential performance trade-offs.

Related benchmarks:

classList.contains vs. Set vs regex (version: 0)

Comparing performance of: Use hasClass shorthand vs Use classList vs Use classname match

Created: 3 years ago by: Registered User

Jump to the latest result

Use hasClass shorthand

Use classList

Use classname match

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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