Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
className vs. setAttribute vs. classList vs. dataset
(version: 0)
Benchmark.js
Comparing performance of:
className vs setAttribute vs classList vs dataset
Created:
6 years ago
by:
Guest
Go to the latest result
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>
Run tests (4)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=502254" width="100%" height="500px"></iframe>
className
5K/s
setAttribute
3K/s
dataset
1K/s
classList
1K/s
View exact numbers
Test name
Executions per second
✓
className
4,512 Ops/sec
setAttribute
3,009 Ops/sec
dataset
1,394 Ops/sec
classList
1,250 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**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
Native JS classList versus Native JS getAttribute
classList.add vs setAttribute
DataAttribute vs Class Selector on body
setAttribute vs classList.add
Comments
Confirm delete:
Do you really want to delete benchmark?