Benchmark: classList.contains vs.

HTML Preparation code:

<div id="foo" class="bar baz"></div>

Script Preparation code:

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

Tests:

Use hasClass shorthand
function hasClass(element, classes) { classes = classes.split(' '); for (var i = 0; i < classes.length; i++) { if (!element.classList.contains(classes[i])) { return false; } } return true; }; hasClass(test_element, "bar baz");
Use classList
test_element.classList.contains("bar"); test_element.classList.contains("baz");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Use hasClass shorthand
Use classList

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
Use hasClass shorthand	7729117.5 Ops/sec
Use classList	7416455.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help explain the provided benchmark.

**What is being tested?**

The benchmark is testing two approaches for checking if an element has a specific class:

1. `hasClass` shorthand: This function checks if an element has one or more classes by splitting the class name into individual classes and using the `classList.contains()` method to check each class.
2. Using `classList.contains()`: This method directly checks if an element has a specific class.

**Options compared**

The two options being compared are:

* `hasClass` shorthand: This approach uses a custom function to manually split the class name and use the `classList.contains()` method for each individual class.
* Using `classList.contains()`: This approach directly uses the `classList.contains()` method to check if an element has a specific class.

**Pros and Cons of each approach**

1. `hasClass` shorthand:
	* Pros: More flexible, as it allows checking multiple classes in one step (by passing an array of classes).
	* Cons: Requires custom implementation, which can add complexity.
2. Using `classList.contains()`: 
	* Pros: Built-in method, easy to use, and efficient for a single class check.
	* Cons: Less flexible, as it requires separate calls for each class.

**Library**

The benchmark uses the `document` object from the DOM (Document Object Model) library, which provides a way to interact with HTML documents in JavaScript. Specifically, it's using:

* `document.getElementById()`: To retrieve an element by its ID.
* `classList.contains()`: A built-in method on the `Element` interface that checks if an element has a specific class.

**Special JS feature/syntax**

There is no special JavaScript feature or syntax being tested in this benchmark. The code is straightforward and relies solely on the `classList` property of HTML elements, which was introduced in ECMAScript 5 (ES5) as part of the standard for modern web browsers.

**Other alternatives**

For this specific task, using a built-in method like `classList.contains()` is often considered the best approach. However, if you need more flexibility or control over the class checking process, the custom implementation of the `hasClass` shorthand might be a viable alternative.

Some other alternatives to the `hasClass` shorthand could include:

* Using a dedicated library like jQuery's `.hasClass()` method.
* Creating a custom function using `Array.prototype.some()` and `element.classList.contains()`.
* Utilizing a polyfill for older browsers that don't support `classList`.

However, these alternatives may add unnecessary complexity or dependencies to the codebase.

Related benchmarks:

classList.contains vs. (version: 0)

Comparing performance of: Use hasClass shorthand vs Use classList

Created: 9 years ago by: Registered User

Jump to the latest result

Use hasClass shorthand

Use classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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