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

Script Preparation code:

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

Tests:

className const regex
return xre.test(el.className);
className cached regex
let s = xs; // ensure local var instead of closure var let re = cache.get(s); if (!re) { re = new RegExp('\\b' + s + '\\b'); cache.set(s, re); } return re.test(el.className);
className new regex
return new RegExp('\\b' + xs + '\\b').test(el.className);
classList contains
return el.classList.contains(xs);
className split includes
return el.className.split(' ').includes(xs);
className indexOf scan
let s = xs; // ensure local var instead of closure var let c = el.className; let sl = s.length; let cl = c.length; let i = c.indexOf(s); //console.debug(i); if (i === 0) { let j = i + sl; if (j === cl || c[j] === ' ') return true; } while (i !== -1) { let j = i + sl; if (c[i - 1] === ' ' && (j === cl || c[j] === ' ')) return true; i = c.indexOf(s, j + 1); //console.debug(i); } return false;

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
className indexOf scan

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

Browser/OS: Firefox 100 on Windows

View result in a separate tab

Test name	Executions per second
className const regex	19175168.0 Ops/sec
className cached regex	15735784.0 Ops/sec
className new regex	7319666.5 Ops/sec
classList contains	24467294.0 Ops/sec
className split includes	7550323.5 Ops/sec
className indexOf scan	17836272.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'm ready to dive into the benchmark!

The provided JSON represents a JavaScript microbenchmarking test, specifically designed to compare the performance of different approaches for searching and manipulating class names in HTML elements.

**Benchmark Definition**

The benchmark is defined by a single line of code that returns a boolean value indicating whether the given class name `xs` can be found within another class name `el.className`. The class names are defined in the "Script Preparation Code" section:

```javascript
var el = document.createElement('div');
el.className = 'foo bar baz hello world';
var xs = 'hello';
var xre = new RegExp('\\\\b' + xs + '\\\\b');
```

**Test Cases**

There are six test cases, each representing a different approach to searching and manipulating class names:

1. **className const regex**: Uses a constant regular expression `xre` to search for the class name `xs`.
2. **className cached regex**: Creates a cache of compiled regular expressions and uses it to search for the class name `xs`. This approach is similar to `className const regex`, but with caching.
3. **className new regex**: Creates a new regular expression on each iteration, rather than reusing one.
4. **classList contains**: Uses the `classList.contains` method to check if the element has the given class name.
5. **className split includes**: Splits the class name into individual words and checks if any of them match the given class name.
6. **className indexOf scan**: Uses a loop to search for the class name within the class names.

**Options Compared**

The benchmark compares six different approaches:

* Creating a constant regular expression (`className const regex` and `className cached regex`)
* Reusing a compiled regular expression with caching (`className cached regex`)
* Creating a new regular expression on each iteration (`className new regex`)
* Using the `classList.contains` method (`classList contains`)
* Splitting the class name into individual words and checking for matches (`className split includes`)
* Searching for the class name within the class names using a loop (`className indexOf scan`)

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **className const regex**: Fast and efficient, but may not be suitable if the class name is variable or dynamic.
* **className cached regex**: Similar to `className const regex`, but with caching for performance improvement. Pros: faster execution times; Cons: may require more memory.
* **className new regex**: Inefficient due to repeated compilation of regular expressions. Not recommended.
* **classList contains**: Fast and efficient, as it uses the browser's optimized implementation. Pros: fast execution times; Cons: not suitable for dynamic class names or custom implementations.
* **className split includes**: Moderate performance, as it involves splitting the class name into individual words. May be acceptable for simple use cases.
* **className indexOf scan**: Inefficient due to repeated searches within the class names. Not recommended.

**Library and Purpose**

In this benchmark, two libraries are used:

1. `RegExp`: Used to create regular expressions for searching class names.
2. `classList`: Used in the `classList.contains` approach to check if an element has a given class name.

**Special JS Feature or Syntax**

The benchmark uses the following special JavaScript feature or syntax:

* Regular expressions (`RegExp`)
* Closures ( implicit, but used in the `className cached regex` approach)

Overall, this benchmark provides a comprehensive comparison of different approaches for searching and manipulating class names in HTML elements.

Related benchmarks:

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

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

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

className indexOf scan

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