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');

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Use hasClass shorthand

7.1M/s

Use classList

6.2M/s

Use classname match

2.4M/s

Fastest: Use hasClass shorthand (3.0x faster)

View exact numbers

✓ Use hasClass shorthand: 7,054,838 ops/sec
• Use classList: 6,169,006 ops/sec
• Use classname match: 2,390,823 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Use classList

14.6M/s

Use hasClass shorthand

10.9M/s

Use classname match

3.5M/s

View exact numbers

Test name	Executions per second
✓ Use classList	14,553,115 Ops/sec
Use hasClass shorthand	10,877,790 Ops/sec
Use classname match	3,496,751 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.

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

Go to the latest result

Use hasClass shorthand

Use classList

Use classname match

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

Use hasClass shorthand

Use classList

Use classname match

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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