Benchmark: Has Class With Cache

HTML Preparation code:

<div class='test some more items and stuff here' id='test'></div>

Script Preparation code:

var elem = document.getElementById('test');
var cache = ' ' + elem.className + ' ';

Tests:

ClassList Contains
var has = elem.classList.contains('stuff');
ClassName IndexOf
var has = (' ' + elem.className + ' ').indexOf(' stuff ');
Cached ClassName IndexOf
var has = cache.indexOf(' stuff ');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ClassList Contains
ClassName IndexOf
Cached ClassName IndexOf

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Overview**

The benchmark is designed to compare three approaches for checking if an HTML element has a specific class:

1. `classList.contains()` method
2. `indexOf()` method on the element's `className` property
3. Using a cached version of the `className` value

**Benchmark Definition JSON**

The benchmark definition includes the following information:

* **Name**: "Has Class With Cache"
* **Description**: A brief explanation of the benchmark
* **Script Preparation Code**: A JavaScript snippet that prepares the test environment by getting an HTML element with an ID of "test" and storing its class name in a variable called `cache`
* **Html Preparation Code**: The corresponding HTML code for the test case, including the element with the specified class

**Individual Test Cases**

The benchmark includes three individual test cases:

1. **ClassList Contains**
	* This test uses the `classList.contains()` method to check if an element has a specific class.
2. **ClassName IndexOf**
	* This test uses the `indexOf()` method on the element's `className` property to find the index of the target class.
3. **Cached ClassName IndexOf**
	* This test uses the cached value of the `className` variable (prepared in the script) and searches for the target class using the `indexOf()` method.

**Pros and Cons**

Here are some general pros and cons of each approach:

1. **ClassList Contains**
	* Pros: Efficient, modern, and widely supported.
	* Cons: May not be as fast as other approaches on older browsers or with large element lists.
2. **ClassName IndexOf**
	* Pros: Can be faster than `classList.contains()` for very specific class names.
	* Cons: Requires concatenating the class name with a separator (in this case, a space), which may lead to slower performance.
3. **Cached ClassName IndexOf**
	* Pros: Can be faster than using `classList.contains()` if the same class is checked multiple times.
	* Cons: Requires storing and updating the cached value, which can add overhead.

**Library**

In this benchmark, the `classList` property is used on an HTML element, which is a part of the ECMAScript 5 standard. The `contains()` method is implemented in most modern browsers, making it a widely supported solution.

**Special JS Feature or Syntax**

The benchmark does not use any special JavaScript features or syntax that require a deep understanding of the language. However, it's worth noting that this approach assumes that the element has a class list property and that the `contains()` method is implemented correctly in the browser being tested.

**Other Alternatives**

Alternative approaches for checking if an HTML element has a specific class might include:

1. **QuerySelector()**: A more modern and efficient way to select elements based on their class names.
2. **Regular Expressions**: Using regular expressions to search for the target class name in the element's `className` property.
3. **DOM Traversal**: Using DOM traversal methods like `querySelectorAll()` or `getElementsByClassName()` to find matching elements.

Keep in mind that these alternatives may have different performance characteristics and trade-offs, and may not be as widely supported as the original approach.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:72.0) Gecko/20100101 Firefox/72.0

Browser/OS: Firefox 72 on Windows 7

View result in a separate tab

Test name	Executions per second
ClassList Contains	14003657.0 Ops/sec
ClassName IndexOf	2858453.8 Ops/sec
Cached ClassName IndexOf	23040670.0 Ops/sec

Related benchmarks:

Has Class With Cache (version: 0)

Determining which method to check if an element has a specific class.

Comparing performance of: ClassList Contains vs ClassName IndexOf vs Cached ClassName IndexOf

Created: 6 years ago by: Guest

Jump to the latest result

ClassList Contains

ClassName IndexOf

Cached ClassName IndexOf

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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