Benchmark: Comparison with className vs classList with unique value

HTML Preparation code:

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

Tests:

classList with unique class
var element = document.getElementById("foo"); var i = 1000; while (i--) { if(element.classList == 'test') { console.log('Equal'); } }
className
var element = document.getElementById("foo"); var i = 1000; while (i--) { if(element.className == 'test') { console.log('Equal'); } }
classList with multiple classes
var element = document.getElementById("foo"); var i = 1000; while (i--) { if(element.classList.contains('test')) { console.log('Contains'); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classList with unique class
className
classList with multiple classes

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 benchmark and explain what's being tested.

**Benchmark Purpose:**

The benchmark is designed to compare the performance of three different ways to check if an element has a specific class in JavaScript, using the `classList` API (a part of HTML5). The tests aim to determine which approach is fastest for checking equality (i.e., whether the class exists exactly once) and containment (i.e., whether the class is among a set of classes).

**Options being compared:**

1. **`element.classList == 'test'`**: This method checks if the `classList` property contains the exact string `'test'`. However, this approach has some issues:
	* It's not very efficient because it creates a new RegExp object every time the test is run.
	* It doesn't handle cases where the class name might contain special characters or whitespace.
2. **`element.className == 'test'`**: This method checks if the `className` property (a string) contains the exact string `'test'`. However, this approach has some issues:
	* It's not very efficient because it creates a new RegExp object every time the test is run.
	* It doesn't handle cases where the class name might contain special characters or whitespace.
3. **`element.classList.contains('test')`**: This method checks if the `classList` property contains the exact string `'test'`. However, this approach has some issues:
	* It's not very efficient because it uses a linear search algorithm.
	* It doesn't handle cases where the class name might contain special characters or whitespace.

**Pros and Cons:**

1. **`element.classList == 'test'`**:
	* Pros: Simple and easy to understand.
	* Cons: Inefficient, prone to errors with special characters or whitespace, and not designed for containment checks.
2. **`element.className == 'test'`**:
	* Pros: Similar to the first option in terms of simplicity and ease of use.
	* Cons: Same issues as the first option (inefficiency, potential errors, and lack of support for containment).
3. **`element.classList.contains('test')`**:
	* Pros: Designed for containment checks, efficient in practice (algorithms with a time complexity of O(n)), and handles special characters or whitespace.
	* Cons: Less straightforward than the first two options.

**Library usage:**

In this benchmark, no specific library is used. However, the `classList` API is a built-in feature of HTML5 that allows you to dynamically add and remove classes from an element's class list.

**Special JS features or syntax:**

The only special aspect of JavaScript in this benchmark is the use of template literals (the `\r\n`) and the implicit coercion of strings (`'test'`).

**Alternatives:**

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

* Using `element.classList.contains('class-name')`
* Creating a regular expression that matches the expected class names
* Using a third-party library or function that provides efficient class name checking

Keep in mind that these alternatives may have different trade-offs and performance characteristics compared to the options being tested.

Latest run results:

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

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

Browser/OS: Chrome 77 on Mac OS X 10.14.0

View result in a separate tab

Test name	Executions per second
classList with unique class	20.8 Ops/sec
className	23.1 Ops/sec
classList with multiple classes	23.0 Ops/sec

Related benchmarks:

Comparison with className vs classList with unique value (version: 0)

Comparing performance of: classList with unique class vs className vs classList with multiple classes

Created: 5 years ago by: Guest

Jump to the latest result

classList with unique class

className

classList with multiple classes

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