Benchmark: classList.contains vs. shorthand

HTML Preparation code:

<div id="foo" class="bar"></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");
Use classList
test_element.classList.contains("bar");

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: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

Browser/OS: Chrome 89 on Mac OS X 10.13.6

View result in a separate tab

Test name	Executions per second
Use hasClass shorthand	2228159.8 Ops/sec
Use classList	5433962.5 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 provided JSON and explain what's being tested, the options compared, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark is comparing two approaches to check if an element has a specific class:

1. `hasClass` function with a shorthand approach using `element.classList.contains()`.
2. The built-in `classList` property on HTML elements.

**Options Compared**

The options being compared are:

* ** Hasan's `hasClass` function**: A custom function that takes two arguments: the element and an array of class names. It splits the class names into individual classes and checks if each one is present using `element.classList.contains()`.
* **Built-in `classList` property**: The `classList` property on HTML elements allows direct access to a list of classes applied to an element. This approach uses the same syntax as `element.className`, but provides more functionality, such as checking for presence and removing classes.

**Pros and Cons**

**Hasan's `hasClass` function:**

Pros:

* Allows for more fine-grained control over the class names being checked.
* Can be useful if you need to perform additional checks on individual classes.

Cons:

* Requires an extra function definition, which can add overhead.
* May not be as efficient as using the built-in `classList` property due to the string splitting and iteration.

**Built-in `classList` property:**

Pros:

* Is a built-in feature of HTML elements, so it's likely to be more efficient than a custom function.
* Provides additional functionality beyond just checking for presence.

Cons:

* May have additional overhead due to the extra properties and methods on the element object.
* Can be less readable or maintainable if not used carefully.

**Other Considerations**

Both approaches are suitable for simple class checks, but they may differ in performance and readability depending on your specific use case. If you need more control over the class names being checked or perform additional operations, Hasan's `hasClass` function might be a better choice. However, if you're looking for a lightweight and efficient solution, using the built-in `classList` property is likely a better option.

**Library Used (if any)**

There is no explicit library used in this benchmark. The `classList` property is a native HTML element feature.

**Special JS Feature or Syntax**

This benchmark uses JavaScript syntax that's widely supported across modern browsers and environments. There are no special features or syntax beyond what's commonly used in web development.

Related benchmarks:

classList.contains vs. shorthand (version: 0)

Comparing performance of: Use hasClass shorthand vs Use classList

Created: 3 years ago by: Guest

Jump to the latest result

Use hasClass shorthand

Use classList

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