Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
toggle classname string vs array vs classList
(version: 0)
Comparing performance of:
string vs array vs classList
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo" class="some other classname"></div>
Tests:
string
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className += " bar"; element.className = element.className.slice(0, -4); }
array
var element = document.getElementById("foo"); var i = 1000; while (i--) { var items = element.className.split(' ') if (items.indexOf('bar') < 0) { items.push('bar'); element.className = items.join(' ') } items = element.className.split(' ') items.pop() element.className = items.join(' '); }
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
string
array
classList
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko
Browser/OS:
IE 11 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=536106" width="100%" height="500px"></iframe>
string
247/s
array
218/s
classList
171/s
View exact numbers
Test name
Executions per second
✓
string
247 Ops/sec
array
218 Ops/sec
classList
171 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the benchmark and explain what's being tested. **Benchmark Overview** The test measures the performance of three different approaches to toggle a class name on an HTML element: 1. **String manipulation**: This approach uses string concatenation and slicing to add or remove the "bar" class from the element. 2. **Array manipulation**: This approach splits the current class names into an array, adds or removes the "bar" class, and then joins them back together as a string. 3. **classList API**: This approach uses the `classList` property to add or remove the "bar" class from the element. **Options Compared** The three options are compared in terms of their performance (number of executions per second). The benchmark is run on an IE 11 browser and Windows desktop platform. **Pros and Cons of Each Approach** 1. **String Manipulation** * Pros: Simple, easy to implement. * Cons: + Can be slow due to string concatenation and slicing operations. + May lead to performance issues if the class name is very long. 2. **Array Manipulation** * Pros: + Can be faster than string manipulation since it avoids creating intermediate strings. + Allows for easier management of multiple class names. * Cons: + Requires more memory and processing power due to array operations. 3. **classList API** * Pros: + Fast and efficient, as it uses native DOM methods. + Easy to use and doesn't require explicit string manipulation. * Cons: None notable in this case. **Libraries and Special JS Features** None of the test cases use any libraries or special JavaScript features beyond the standard DOM API. **Other Considerations** When choosing between these approaches, consider the following: * If you need to manage multiple class names, array manipulation might be a better choice. * If performance is critical, the `classList` API is likely the best option due to its native implementation. * For simple cases where class name changes are infrequent, string manipulation might be sufficient. **Alternatives** If you're interested in exploring alternative approaches, consider: * Using a library like Lodash or underscore.js for array manipulation, which can provide more concise and readable code. * Implementing a custom solution using a different algorithm or data structure, such as a trie or suffix tree, to optimize class name lookup and manipulation. * Using a CSS-in-JS approach to manage class names, which can eliminate the need for explicit string manipulation. Keep in mind that these alternatives may have trade-offs in terms of performance, memory usage, or ease of implementation.
Related benchmarks
classList toggle false vs. classList remove
getElementById vs id toggling class
Comments
Confirm delete:
Do you really want to delete benchmark?