Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
className vs classListg
(version: 1)
Comparing performance of:
className vs classList
Created:
one year ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="foo"></div>
Tests:
className
var element = document.getElementById("foo"); element.className = "bar ";
classList
var element = document.getElementById("foo"); element.classList.add("bar");
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
className
classList
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
12 days ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36 Edg/147.0.0.0
Browser/OS:
Chrome 147 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
className
2833807.2 Ops/sec
classList
2762758.5 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark in question compares two different methods for manipulating CSS classes on a DOM element in JavaScript: using `className` and `classList`. Specifically, the comparison is centered around how efficiently each method can add a class to an element. ### Options Being Compared 1. **className**: - **Benchmark Definition**: `element.className = "bar ";` - This approach directly assigns a string to the `className` property of the HTML element, specifying all classes as a single space-separated string. 2. **classList**: - **Benchmark Definition**: `element.classList.add("bar");` - This approach utilizes the `classList` property, a modern feature that provides more versatile methods to manipulate classes, including `add`, `remove`, `toggle`, and `contains`. ### Pros and Cons #### 1. Using `className` - **Pros**: - Simplicity: This method can be straightforward as you're directly setting the entire `class` attribute. - Compatibility: It's widely supported in all browsers, including older ones. - **Cons**: - Overwrite Issue: When using `className`, you must provide the entire class string, which can lead to overwriting existing classes unintentionally. - String Manipulation: It's less flexible, as you need to manually handle spaces and existing class names. #### 2. Using `classList` - **Pros**: - Flexibility: Allows for individual class manipulations without affecting other classes already applied to the element. - Readability: Methods like `add` and `remove` improve code readability and intent. - Performance: Generally provides better performance, especially when managing multiple classes because it avoids the overhead of parsing strings. - **Cons**: - Compatibility: Older browsers (particularly Internet Explorer 9 and earlier) do not support the `classList` property, although it's highly supported in modern environments. ### Benchmark Results The results indicate that the benchmark for `className` achieved **21,707,038 executions per second**, vastly outperforming the `classList` method, which achieved **6,493,166 executions per second**. This stark difference suggests that in this specific case, `className` is more efficient for adding a single class to an element in the browser environment tested. ### Additional Considerations - **Browser Variability**: Performance can vary significantly based on the browser and the underlying JavaScript engine. The specific version of Chrome used for this test shows very high performance in both methods but with a notable advantage for `className`. - **Context of Usage**: The choice between `className` and `classList` should also consider the context. For modern applications, the ability to easily manage multiple classes with `classList` often outweighs the raw performance metrics unless performance is critical in highly dynamic applications. - **Alternatives**: Other alternatives include using libraries such as jQuery that abstract these manipulations away, but they come with their own overhead and complexity. Additionally, developers might consider CSS-in-JS libraries or frameworks that manage CSS styles at the component level, providing another layer of abstraction and component-scoped styles. In conclusion, while the benchmark shows that `className` is faster in this specific test case, modern JavaScript development generally favors `classList` due to its greater flexibility and readability, especially in applications where class management can be complex.
Related benchmarks:
className vs classList
className vs classList
Benchmark
classList vs 2 classList
className vs. className
setAttribute, classList
className vs classList with =
test12xxxx2
test123xxxxx
Comments
Confirm delete:
Do you really want to delete benchmark?