Benchmark: classList.contains VS className.includes

HTML Preparation code:

<div id="foo" class="test"></div>

Tests:

className.includes
let el = document.getElementById("foo"), i = 10000; while (i--) { el.className?.includes("test"); }
classList.contains
let el = document.getElementById("foo"), i = 10000; while (i--) { el.classList?.contains("test"); }

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark is defined in JSON, which provides information about the test case. Here's a summary:

* **Name**: The name of the benchmark, which is "classList.contains VS className.includes".
* **Description**: A brief description of the test case, which is just "x10000". This suggests that the test case involves iterating over a large number (10,000) and performing a comparison.
* **Script Preparation Code** and **Html Preparation Code**: These are empty strings, indicating that no special setup code or HTML structure needs to be executed before running the benchmark.

**Individual Test Cases**

There are two individual test cases:

1. `className.includes`:
	* The script preparation code is an empty string.
	* The HTML preparation code is `<div id="foo" class="test"></div>`, which creates a DOM element with an ID of "foo" and a class of "test".
	* The benchmark definition is a JavaScript snippet that:
		+ Retrieves an HTML element using `document.getElementById("foo")`.
		+ Initializes a counter variable `i` to 10,000.
		+ Enters a while loop that runs 10,000 times.
		+ Inside the loop, it checks if the element's class includes "test" using the `includes()` method.
2. `classList.contains`:
	* The script preparation code is an empty string.
	* The HTML preparation code is the same as above: `<div id="foo" class="test"></div>`.
	* The benchmark definition is similar to the first test case, but uses the `contains()` method on the element's `classList`.

**What's being tested?**

Both test cases are measuring the performance of two different ways to check if a string contains another string within an HTML element's class name or list of classes.

In other words, the benchmark is comparing the speed of:

* Using `includes()` method on a string
* Using `contains()` method on the `classList` property of an HTML element

**Library and Purpose**

The `classList` property is part of the W3C DOM specification and provides a way to access and manipulate an element's class list. It's a built-in feature in modern browsers.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes being tested here, as both test cases use standard language constructs (loops, string comparison).

**Pros and Cons of Different Approaches**

Here are some pros and cons of using `includes()` vs. `contains()`:

* **`includes()`**:
	+ Pros: More flexible, can be used to check if a substring is present within the class name.
	+ Cons: May be slower due to string search algorithm.
* **`contains()`**:
	+ Pros: Can be faster for simple checks (e.g., checking if "test" is in the class list).
	+ Cons: May not work as expected for more complex class names or lists.

It's worth noting that modern browsers have optimized `includes()` and `contains()` methods, so the performance difference between these two approaches may be smaller than expected.

**Alternatives**

There are other ways to achieve similar results without using `classList.contains`:

* Using regular expressions (e.g., `/\btest\b/.test(el.className)`).
* Implementing a custom string search algorithm.
* Using a library like Lodash, which provides a `contains()` function.

However, these alternatives may not be as efficient or straightforward to use as the built-in `classList.contains` method.

Related benchmarks:

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

?. x10000

Comparing performance of: className.includes vs classList.contains

Created: 4 years ago by: Guest

Jump to the latest result

className.includes

classList.contains

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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