Benchmark: classList.contains vs. loop vs regex

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");
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: one year ago)

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Use hasClass shorthand	10877790.0 Ops/sec
Use classList	14553115.0 Ops/sec
Use classname match	3496750.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmark that compares three approaches for checking if an HTML element has a specific class: `classList.contains`, `loop`, and regular expression (`regex`).

**Approach 1: Using `classList.contains`**

This approach uses the built-in `classList.contains()` method of the `Element` interface to check if the element has a specific class. The `classList` property returns a `DOMTokenList` object, which contains the classes that are applied to the element.

Pros:

* Native implementation in most browsers, making it likely to be fast and efficient.
* Easy to read and understand, as it's a standard method in JavaScript.

Cons:

* May not work correctly for very large class lists or with older browsers that don't support `classList`.

**Approach 2: Using a Loop**

This approach uses a simple loop to check if the element has each of the specified classes. It splits the class list into an array and then iterates over it, checking if the element's class list contains each class.

Pros:

* More control over the iteration process, allowing for optimization.
* Works with any JavaScript implementation, not just those that support `classList`.

Cons:

* May be slower than the native implementation due to the overhead of the loop.
* Can be more error-prone and harder to read, especially for complex class lists.

**Approach 3: Using Regular Expressions**

This approach uses regular expressions to match the specified classes against the element's class list. The `match()` method is used to search for a pattern in the string (in this case, the class name).

Pros:

* Can be more efficient than the loop approach, especially for large class lists.
* Works with any JavaScript implementation.

Cons:

* May not work correctly for classes that contain special characters or are escaped.
* Regular expressions can be complex and harder to read than other approaches.

**Library Usage**

In this benchmark, no libraries are explicitly used. However, it's worth noting that `classList` is a property of the `Element` interface, which is part of the DOM API (Document Object Model). This means that if you're using a library that modifies or extends the DOM, it may affect the performance of this benchmark.

**Special JavaScript Features/Syntax**

None are explicitly used in this benchmark. However, it's worth noting that some browsers may support additional features like `let` and `const` declarations, which can affect the performance of certain code blocks. The benchmark doesn't specifically test for these features, but they could potentially impact the results.

**Alternatives**

If you're looking for alternative approaches to this benchmark, here are a few options:

1. **Using `hasAttribute()`**: Instead of checking if an element has a specific class, you can use `hasAttribute()` with the `class` attribute name.
2. **Using `indexOf()` and `includes()`**: You can use `indexOf()` to find the index of a class in the element's class list, and then use `includes()` to check if the class is present.
3. **Using `Array.prototype.some()`**: This approach uses the `some()` method to iterate over the class list and check if any of the classes match the specified class.

These alternative approaches may have different performance characteristics or trade-offs in terms of readability, maintainability, and compatibility with older browsers.

Related benchmarks:

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

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

Created: 5 years ago by: Guest

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