Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
className vs classList by Tyler
(version: 0)
Comparing performance of:
ClassList vs className
Created:
7 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="foo">Hello</div>
Tests:
ClassList
let element = document.getElementById("foo"); element.classList.add("foo", "bar");
className
let element = document.getElementById("foo"); element.className = "foo bar";
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
ClassList
className
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what's being tested. **Benchmark Overview** The benchmark compares two approaches to modify the `className` property of an HTML element: using the `classList` API (ClassList) versus assigning a string value directly to `className`. The goal is to measure the performance difference between these two approaches. **Options Compared** Two options are compared: 1. **ClassList**: This approach uses the `classList` API, which is a standardized way to work with classes in HTML elements. 2. **className**: This approach assigns a string value directly to the `className` property of the element. **Pros and Cons of Each Approach** **ClassList:** Pros: * More modern and widely supported (IE11+, modern browsers) * Easier to work with, as it provides methods like `add()`, `remove()`, and `contains()` * Can be more efficient in certain scenarios Cons: * Not available in older browsers (IE8-10) **className:** Pros: * Widely supported across older browsers * Simple and easy to use Cons: * Less modern and less flexible than ClassList * Can lead to issues with class naming conventions, as browsers may not always parse the string correctly **Other Considerations** When using `classList`, it's essential to note that the browser needs to parse the string you provide in order to apply the classes. If you pass an invalid class name (e.g., a reserved keyword), the browser might throw errors or behave unexpectedly. On the other hand, assigning a string value directly to `className` can lead to issues with class naming conventions and may not work as expected across different browsers. **Library/Utility Used** The benchmark uses the `classList` API, which is part of the W3C Standard. **Special JavaScript Feature/Syntax** None mentioned in this specific benchmark. However, it's worth noting that older browsers (IE8-10) might require additional polyfills or workarounds to use `classList`. **Benchmark Preparation Code and Results** The provided JSON includes two individual test cases: 1. The first test case uses the ClassList approach: ```javascript let element = document.getElementById("foo"); element.classList.add("foo", "bar"); ``` 2. The second test case uses the className approach: ```javascript let element = document.getElementById("foo"); element.className = "foo bar"; ``` The latest benchmark results show that Chrome 72 performs better when using ClassList (with an `ExecutionsPerSecond` value of approximately 2141343) compared to assigning a string value directly to `className` (with an `ExecutionsPerSecond` value of approximately 1268007.875). **Other Alternatives** If you want to explore alternative approaches, consider the following: * Using CSS classes: Instead of using JavaScript to manipulate class names, you can use CSS classes and apply them dynamically. * Using a CSS-only solution: Some libraries or frameworks provide CSS-only solutions for working with classes. Keep in mind that these alternatives might not be as efficient or widely supported as using the `classList` API or assigning string values directly to `className`.
Related benchmarks:
classList.contains vs. a
.getElementsByClassName() vs. .querySelectorAll()
long vs short classlist contains
querySelector(class) vs classList.contains
className vs classList with existing classes
Comments
Confirm delete:
Do you really want to delete benchmark?