Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
className vs. classList
(version: 0)
Fork from https://measurethat.net/Benchmarks/Show/54/0/classname-vs-setattribute-vs-classlist
Comparing performance of:
className = vs className += vs classList
Created:
8 years ago
by:
Guest
Jump 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'; element.className = ''; }
className +=
var element = document.getElementById('foo'); var i = 1000; while (i--) { element.className += ' bar'; element.className = ''; }
classList
var element = document.getElementById('foo'); var i = 1000; while (i--) { element.classList.add('bar'); element.classList.remove('bar'); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
className =
className +=
classList
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):
The provided JSON represents a JavaScript benchmarking test case for measuring the performance of three different approaches to update the `className` property of an HTML element: using the `className` assignment operator (`=`), using string concatenation (`+`), and using the `classList` API. **Options being compared:** 1. **className =**: This approach uses the assignment operator (`=`) to assign a new value to the `className` property. 2. **className +**: This approach uses string concatenation (`+`) to concatenate a new class name with the existing `className`. 3. **classList**: This approach uses the `classList` API, which is a part of the Web API that allows you to manage the classes of an element. **Pros and Cons:** * **className =**: + Pros: Simple and straightforward. + Cons: Can lead to slower performance due to string creation and assignment overhead. * **className +**: + Pros: Avoids string creation overhead, as the new class name is concatenated with the existing one. + Cons: Can be less readable and more error-prone than using `=` or `classList`. * **classList**: + Pros: Most efficient way to update classes, as it avoids creating a new string and directly modifies the element's class list. + Cons: Requires knowledge of the Web API. **Library/Library Purpose:** None in this specific benchmark, but note that some browsers may have built-in optimizations or caching mechanisms for certain APIs (e.g., `classList`). **Special JS feature/Syntax:** The benchmark uses a simple while loop to repeat the update operation 1000 times. This is not a special JavaScript feature or syntax, just a straightforward way to demonstrate performance differences. Other alternatives: * **Using `setAttribute('class', 'bar')`**: Another approach that can be used to set the class attribute directly. * **Using `element.classList.add()` followed by `element.classList.remove()```**: An alternative implementation using the `classList` API for both adding and removing classes. * **Using a library like Lodash or Moment.js for string manipulation** : If you need to perform more complex string operations, you might consider using a library like Lodash or Moment.js. Keep in mind that the performance differences between these approaches may vary depending on the specific browser, hardware, and JavaScript engine. MeasureThat.net provides a useful platform for benchmarking and comparing performance characteristics of different approaches.
Related benchmarks:
Replace surrounded class with className, classList.replace and setAttribute
Native JS classList versus Native JS getAttribute
setAttribute(...) vs. classList.add(...) vs classList.value vs className (multiple classes, no override)
classList.add vs setAttribute
setAttribute vs classList.add
Comments
Confirm delete:
Do you really want to delete benchmark?