Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Rewrite multiple classes (setAttribute vs. className vs. classList vs setAttribute=List vs className=List)
(version: 0)
Rewrite multiple classes setAttribute vs. className vs. classList vs. setAttribute=List vs. className=List
Comparing performance of:
setAttribute vs className vs classList vs setAttribte=List vs className=List
Created:
2 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="foo" class="a b c"></div>
Tests:
setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { var classes = (0 == i % 2) ? "1 2 3" : "4 5 6"; element.setAttribute("class", classes); }
className
var element = document.getElementById("foo"); var i = 1000; while (i--) { var classes = (0 == i % 2) ? "1 2 3" : "4 5 6"; element.className = classes; }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { var classes = (0 == i % 2) ? ["1", "2", "3"] : ["4", "5", "6"]; element.classList.remove(...element.classList); element.classList.add(...classes); }
setAttribte=List
var element = document.getElementById("foo"); var i = 1000; while (i--) { var classes = (0 == i % 2) ? ["1", "2", "3"] : ["4", "5", "6"]; element.setAttribute("class", classes.join(' ')); }
className=List
var element = document.getElementById("foo"); var i = 1000; while (i--) { var classes = (0 == i % 2) ? ["1", "2", "3"] : ["4", "5", "6"]; element.className = classes.join(' '); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (5)
Previous results
Fork
Test case name
Result
setAttribute
className
classList
setAttribte=List
className=List
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.1:latest
, generated one year ago):
Let's break down what's being tested and analyzed in this benchmark. **What is being compared?** The benchmark compares five different approaches to set multiple CSS classes on an HTML element: 1. `setAttribute` method 2. `className` property 3. `classList` API (with `add()` and `remove()` methods) 4. `setAttribute` method with a list of classes joined by spaces (`setAttribte=List`) 5. `className` property with a list of classes joined by spaces (`className=List`) **What is being tested?** The test case creates an HTML element with the ID "foo" and sets multiple CSS classes on it using each of the five approaches, iterating 1000 times to simulate a large number of executions. The goal is to measure which approach performs best in terms of execution speed. **Pros and cons of each approach:** 1. **setAttribute**: Pros: simple, widely supported; Cons: can be slower due to string concatenation. 2. **className**: Pros: easy to use, fast; Cons: can lead to inefficient class list if not properly managed. 3. **classList**: Pros: efficient, easy to manage multiple classes; Cons: may require more code and overhead for add/remove operations. 4. **setAttribute=List**: Pros: similar to `setAttribute`, but with a list of classes joined by spaces; Cons: may be slower than `className` or `classList`. 5. **className=List**: Pros: fast, easy to use; Cons: can lead to inefficient class list if not properly managed. **Library and special JS features:** No external libraries are used in this benchmark. However, the test case does utilize some modern JavaScript features: * The `...` operator (spread syntax) is used in the `classList` approach to pass a list of classes as arguments. * The `[ ]` notation (array literal) is used to create an array of class names. **Other considerations:** * Browser compatibility and performance may vary depending on the specific browser and version being tested. * The results may be influenced by various factors, such as caching, JavaScript engine optimizations, or other browser-specific features. **Alternatives:** Other approaches to set multiple CSS classes on an HTML element include: 1. Using a library like jQuery, which provides a more convenient API for managing class lists. 2. Implementing a custom solution using a string concatenation approach, similar to `setAttribute`. 3. Utilizing CSS preprocessors like Sass or Less to generate CSS classes and reduce the need for JavaScript manipulation. Keep in mind that these alternatives may have their own performance implications and trade-offs, which should be carefully considered when choosing an approach.
Related benchmarks:
Replace surrounded class with className, classList.replace and setAttribute
Rewrite multiple classes (className vs. setAttribute vs. classList)
setAttribute(...) vs. classList.add(...) vs classList.value vs className (multiple classes, no override)
className vs. setAttribute vs. classList v4
Comments
Confirm delete:
Do you really want to delete benchmark?