Benchmark: classList.contains vs. RegExp.test

HTML Preparation code:

<div id="select_true" class="aaa bbb selected"></div>
<div id="select_false" class="aaa bbb ccc"></div>

Script Preparation code:

var rxSelected = /\bselected\b/i;

Tests:

classList
for (var i = 1000; i--; ) { document.getElementById("select_true").classList.contains("selected"); document.getElementById("select_false").classList.contains("selected"); }
RegExp
for (var i = 1000; i--; ) { rxSelected.test(document.getElementById("select_true").className); rxSelected.test(document.getElementById("select_false").className); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classList
RegExp

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; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Windows

View result in a separate tab

Test name	Executions per second
classList	1962.3 Ops/sec
RegExp	1611.2 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark described in the provided JSON compares two different approaches for checking the presence of a class in a DOM element: using the `classList.contains` method and using a regular expression with `RegExp.test`. Here’s a breakdown of what is being tested, the pros and cons of each method, and some considerations surrounding their usage.

### Approaches Compared:

1. **`classList.contains()` Method**:
   - This method belongs to the `classList` property of a DOM element. It checks if a specified class exists in the element's list of classes.
   - **Test Case**: The benchmark runs a loop that calls `classList.contains("selected")` on two DOM elements: one with the class and one without.

2. **Regular Expression (`RegExp.test`)**:
   - This approach uses a regular expression to test if the class name "selected" is found within the `className` string of the DOM element.
   - **Test Case**: Similar to the previous case, but here it uses the regular expression `/\bselected\b/i` to check the class name.

### Pros and Cons:

#### `classList.contains()`
- **Pros**:
  - **Readability**: More understandable for developers; directly conveys the intent of checking if a class exists.
  - **Performance**: Generally faster as it directly accesses the DOM element’s class list.
  - **No Regex Overhead**: Avoids the potential complexities and overhead of regex operations.
  
- **Cons**:
  - **Browser Support**: While widely supported in modern browsers, it may not work in older versions of browsers (IE 9 and below).

#### `RegExp.test`
- **Pros**:
  - **Flexibility**: Can be combined with other patterns and conditions due to the power of regular expressions.
  - **Feature in Older Browsers**: If class handling is performed on an older browser not supporting `classList`, regex might offer a fallback.

- **Cons**:
  - **Complexity**: Less readable, especially for those unfamiliar with regular expressions.
  - **Performance**: Typically slower than `classList.contains()` due to the overhead of evaluating a regular expression and string manipulation.
  
### Other Considerations:
- **Readability vs. Performance**: The choice between these two approaches may depend on the specific needs of the project. If clarity is paramount and performance is acceptable, `classList.contains` is a better choice. In cases where regex patterns are required or where there are concerns about compatibility, the second approach might be worth considering.

- **Regular Expression Syntax**: The regex used employs word boundary anchors (`\b`) and an ignore case flag (`i`). This ensures that the search strictly looks for the "selected" class as a whole word, avoiding partial matches.

### Alternatives:
Other alternatives for checking class presence in JavaScript include:

- **Using `indexOf()` with `className`**: One could use `element.className.indexOf('selected') !== -1` to check for the presence of the class. This has similar performance drawbacks as regex due to string searching but is an option, especially for developers familiar with older practices.
  
- **Using a CSS Framework or Utility Library**: Some libraries or frameworks (like jQuery) offer utility functions that can simplify working with DOM elements and classes, although this can lead to increased dependencies in a project.

In summary, the benchmark compares the efficiency of two methods to check class presence, revealing their respective strengths and weaknesses, which can guide developers in choosing the appropriate method based on their specific use case and requirements.

Related benchmarks:

classList.contains vs. RegExp.test (version: 0)

Comparing performance of: classList vs RegExp

Created: one year ago by: Guest

Jump to the latest result

classList

RegExp

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):