Benchmark: className vs. setAttribute vs. classList vs. dataset

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className = "bar"; }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("class", "bar"); }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("bar"); }
dataset
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.dataset.foo = 'bar'; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
setAttribute
classList
dataset

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Android 10; Mobile; rv:122.0) Gecko/122.0 Firefox/122.0

Browser/OS: Firefox Mobile 122 on Android

View result in a separate tab

Test name	Executions per second
className	4512.1 Ops/sec
setAttribute	3009.4 Ops/sec
classList	1250.3 Ops/sec
dataset	1394.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The MeasureThat.net website provides a platform for users to create and run JavaScript microbenchmarks, comparing different approaches to test the performance of various methods.

**Test Cases**

The benchmark consists of four individual test cases:

1. **`className`**: Tests setting the `className` property of an HTML element.
2. **`setAttribute`**: Tests setting the `getAttribute('class')` method to set the class attribute on an HTML element.
3. **`classList`**: Tests using the `classList` API to add classes to an HTML element.
4. **`dataset`**: Tests setting a dataset property on an HTML element.

**Options Compared**

The benchmark compares four different approaches:

*   Setting the `className` property
*   Using the `setAttribute('class', 'bar')` method
*   Utilizing the `classList.add()` method
*   Setting a dataset property (`dataset.foo = 'bar'`)

**Pros and Cons of Each Approach**

Here's a brief summary of each approach, including their pros and cons:

1.  **`className`**: This is a simple way to set classes on an element. The `className` property allows for easy string manipulation.
    *   Pros: Easy to use, intuitive syntax
    *   Cons: Can be slower than other methods due to the need for concatenation or string interpolation

2.  **`setAttribute('class', 'bar')`**: This method uses a separate API call to set the class attribute of an element.
    *   Pros: More efficient than `className`, as it doesn't require string manipulation
    *   Cons: Requires more code, and might be less intuitive for some developers

3.  **`classList.add('bar')`**: This approach uses the `classList` API to add classes to an HTML element.
    *   Pros: More efficient than `className`, as it doesn't require string manipulation
    *   Cons: Requires support for modern browsers and their CSS APIs

4.  **`dataset.foo = 'bar'`**: This method sets a dataset property on an HTML element.
    *   Pros: Efficient, as it doesn't require any additional strings or API calls
    *   Cons: Less common usage, especially among older browser versions

**Library and Features**

In the test cases provided, none of them explicitly use JavaScript libraries or special features like ES modules, async/await, or modern array methods. However, for accurate benchmarking results, it's recommended to ensure that your tests are compatible with the most recent versions of browsers.

**Alternatives to These Approaches**

If you need alternative approaches for different scenarios:

*   **Using `element.style`**: Instead of setting a class attribute using `className`, consider using the `style` property and CSS stylesheets. This method can be faster but is generally considered less readable.
*   **DOM manipulation libraries**: Libraries like jQuery, Zepto, or TinyCSS might offer more efficient DOM manipulation methods than native JavaScript APIs.

For optimal performance, use modern methods that are supported by most browsers and have better caching capabilities, such as `classList.add()` for class management.

Related benchmarks:

className vs. setAttribute vs. classList vs. dataset (version: 0)

Comparing performance of: className vs setAttribute vs classList vs dataset

Created: 6 years ago by: Guest

Jump to the latest result

className

setAttribute

classList

dataset

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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