Benchmark: className const/cached/new regex, classList contains, className split includes

Script Preparation code:

var el = document.createElement('div');
el.className = 'foo bar baz hello world';
var x = 'hello';
var re = new RegExp('\\b' + x + '\\b');
var cache = new Map();

Tests:

className const regex
re.test(el.className);
className cached regex
re = cache.get(x); if (!re) { re = new RegExp('\\b' + x + '\\b'); cache.set(x, re); } re.test(el.className);
className new regex
new RegExp('\\b' + x + '\\b').test(el.className);
classList contains
el.classList.contains(x);
className split includes
el.className.split(' ').includes(x);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className const regex
className cached regex
className new regex
classList contains
className split includes

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 100 on Windows

View result in a separate tab

Test name	Executions per second
className const regex	10335667.0 Ops/sec
className cached regex	3737176.2 Ops/sec
className new regex	3647951.2 Ops/sec
classList contains	10400986.0 Ops/sec
className split includes	3477236.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 benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark measures the performance of different approaches to test if a certain string (`x`) is included in another string (`el.className`). The benchmark uses JavaScript and the `RegExp` object.

**Options Compared**

There are four options compared:

1. **`re.test(el.className)`**: This option creates a new `RegExp` object using the `new RegExp()` constructor, specifies the pattern to match (`\\\\b + x + '\\b'`), and then tests if the pattern matches the `el.className` string.
2. **`className cached regex`**: This option uses a cache (`Map`) to store precomputed regular expressions for common strings (`x`). If the cached expression is not found, it creates a new one using the same pattern as above and stores it in the cache. Then, it tests if the pattern matches the `el.className` string.
3. **`new RegExp('\\\\b' + x + '\\\\b').test(el.className)`**: This option creates a new `RegExp` object using the `new RegExp()` constructor with the same pattern as above and then tests if the pattern matches the `el.className` string.
4. **`el.classList.contains(x)`**: This option uses the `classList.contains()` method to check if the string (`x`) is contained in the class list of the element (`el`). This approach does not involve regular expressions.

**Pros and Cons**

Here are some pros and cons for each option:

1. **`re.test(el.className)`**:
	* Pros: Simple, fast execution.
	* Cons: Creates a new `RegExp` object every time, which can lead to performance overhead if the same pattern is used multiple times.
2. **`className cached regex`**:
	* Pros: Reduces creation of new regular expressions by caching them, can be faster for repeated use.
	* Cons: Requires more memory for storing cache entries and may have slower initialization time due to the cache lookups.
3. **`new RegExp('\\\\b' + x + '\\\\b').test(el.className)`**:
	* Pros: Similar to option 1 but avoids caching, may be faster for one-time use.
	* Cons: Creates a new `RegExp` object every time, which can lead to performance overhead if the same pattern is used multiple times.
4. **`el.classList.contains(x)`**:
	* Pros: Fastest execution, no regular expressions involved.
	* Cons: May not be as flexible or powerful as regular expression-based approaches.

**Other Considerations**

The benchmark also includes an option that uses the `split()` method to check if the string (`x`) is included in the class list of the element (`el`), but this approach is less efficient than using a regular expression.

**Libraries and Special JS Features**

In this benchmark, the following library is used:

* None (no external libraries are required)

No special JavaScript features or syntax are mentioned in the benchmark definition or test cases.

**Alternatives**

Some alternative approaches to measuring performance could include:

* Using a testing framework like Jest or Mocha
* Creating a benchmark using a language-agnostic approach, such as benchmarking the number of iterations performed by each option
* Using a profiler to measure execution times for different options

Keep in mind that the specific choices made in this benchmark are likely tailored to the use case and requirements of the project.

Related benchmarks:

className const/cached/new regex, classList contains, className split includes (version: 0)

Comparing performance of: className const regex vs className cached regex vs className new regex vs classList contains vs className split includes

Created: 2 years ago by: Guest

Jump to the latest result

className const regex

className cached regex

className new regex

classList contains

className split includes

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