Benchmark: classList.contains VS dataset

HTML Preparation code:

<div id="foo" class="test" data-class-test="1" ></div>

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { if (element.dataset.classTest == 1) {} }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.contains("test"); }

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Firefox 5 runs

classList

872K/s

className

9K/s

Fastest: classList (93.8x faster)

View exact numbers

✓ classList: 871,796 ops/sec
• className: 9,290 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
classList

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:140.0) Gecko/20100101 Firefox/140.0

Browser/OS: Firefox 140 on Linux

View result in a separate tab

classList

507K/s

className

5K/s

View exact numbers

Test name	Executions per second
✓ classList	506,922 Ops/sec
className	4,980 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark.

**Overview**

The provided JSON represents two microbenchmarks: `classList` and `className`. The benchmarks test how fast JavaScript can execute different approaches to check if an element has a specific class. The goal is to determine which approach is faster.

**Benchmark Definition**

The "Benchmark Definition" section provides information about the benchmark, including its name, description, script preparation code, and HTML preparation code.

In this case, both benchmarks use the same HTML structure with a `<div>` element that contains an ID `foo`, a class `test`, and a data attribute `data-class-test` set to 1. The script preparation code is empty for both benchmarks.

**Test Cases**

There are two individual test cases:

1. **className**: This benchmark tests the approach using the `contains()` method on the `classList` property of an element.
2. **classList**: This benchmark tests the approach using the `dataset` attribute to check if an element has a specific class.

**Library Usage**

The `dataset` attribute is a modern HTML feature introduced in CSS3. It allows elements to store custom data attributes that can be accessed by JavaScript. In this case, the `data-class-test` attribute is used to simulate a dataset-like structure. The use of `dataset` is not specific to any library, but it's a part of the standard HTML specification.

**Special JS Feature or Syntax**

The `classList.contains()` method is a built-in method in JavaScript that returns a boolean indicating whether an element has a specific class. This method uses the `dataset` attribute internally. There is no special syntax or feature required to use this method, but it's worth noting that it's a part of the standard JavaScript API.

**Options Compared**

The two benchmarks compare two approaches:

1. **Using `contains()` on `classList`**: This approach uses the `contains()` method on the `classList` property of an element.
2. **Using `dataset` attribute**: This approach uses the `dataset` attribute to check if an element has a specific class.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **Using `contains()` on `classList`**:
	* Pros: Efficient, easy to use, and widely supported.
	* Cons: May not work in older browsers that don't support the `dataset` attribute or modern JavaScript features.
2. **Using `dataset` attribute**:
	* Pros: Works in all modern browsers, allows for more flexibility, and can be used with other libraries or frameworks.
	* Cons: May require additional code to access the data attribute, and some older browsers may not support it.

**Other Alternatives**

There are other alternatives to these approaches, such as:

1. Using a library like Lodash or Underscore.js, which provide `includes()` methods for checking if an element has a specific class.
2. Using a framework like React or Angular, which provide built-in support for handling classes and other DOM attributes.

However, the two benchmarks provided are simple and focused on testing the performance of these specific approaches, making them suitable for microbenchmarking purposes.

classList.contains VS dataset (version: 0)

Comparing performance of: `className vs classList`

Created: 2 years ago by: Guest

Go to the latest result

className

classList

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

classList.contains VS dataset (version: 0)

Comparing performance of: className vs classList

Created: 2 years ago by: Guest

Go to the latest result

className

classList

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `className vs classList`