Benchmark: className.includes vs classList.contains

HTML Preparation code:

<div id="test" class="class1 class2 class3"></div>

Script Preparation code:

var el = document.getElementById("test")

Tests:

className.includes
el.className.includes("class1");
classList.contains
el.classList.contains("class1");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className.includes
classList.contains

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36

Browser/OS: Chrome 96 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
className.includes	7762636.0 Ops/sec
classList.contains	8179151.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's being tested, along with the pros and cons of each approach.

**What's being tested?**

The test measures the performance difference between two methods for checking if an HTML element has a specific class:

1. `className.includes("class1")`
2. `classList.contains("class1")`

**Options compared:**

The test compares these two approaches, but we can also consider other alternatives, such as:

* Using a library like jQuery or Lodash to perform class checks
* Using a different string comparison method, like `indexOf()` or `startsWith()`
* Optimizing the element's DOM structure to reduce class lookup overhead

**Pros and Cons of each approach:**

1. **`className.includes("class1")`:**
	* Pros:
		+ Simple and widely supported (most browsers)
		+ Fewer method calls compared to `classList.contains()`
	* Cons:
		+ Can lead to slower performance due to substring matching
		+ May not be optimized for class name lookup
2. **`classList.contains("class1")`:**
	* Pros:
		+ Optimized for class name lookup and substring matching
		+ Can provide better performance and readability
	* Cons:
		+ More complex and less widely supported (requires DOM API)
		+ May require additional library imports or setup

**Library usage:**

The test uses the `classList` property, which is part of the DOM API. This property provides a more efficient way to check for class presence compared to relying on string manipulation.

**Special JavaScript features/syntax:**

This benchmark doesn't rely on any special JavaScript features or syntax, making it accessible to a wide range of software engineers.

**Alternative approaches:**

1. **jQuery:** You can use jQuery's `.hasClass()` method to perform the same class check, which might be more convenient but also adds an extra library dependency.
2. **Lodash:** Lodash provides the `startsWith()` function, which could be used as a string comparison alternative.
3. **DOM manipulation optimization:** Optimizing the element's DOM structure to reduce class lookup overhead might require modifying the HTML or CSS.

To run this benchmark, you would:

1. Create an HTML file with the provided `Html Preparation Code` (`<div id="test" class="class1 class2 class3"></div>`)
2. Write a JavaScript file with the provided `Script Preparation Code` and the test cases (`el.className.includes("class1");`, `el.classList.contains("class1");`)
3. Upload the HTML and JavaScript files to MeasureThat.net or similar platforms
4. Run the benchmark and view the results

Related benchmarks:

className.includes vs classList.contains (version: 0)

Comparing performance of: className.includes vs classList.contains

Created: 3 years ago by: Guest

Jump to the latest result

className.includes

classList.contains

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