Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
className vs classList add and remove
(version: 0)
Comparing performance of:
className vs classList
Created:
5 years ago
by:
Guest
Go 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 = element.className.replace(' bar', ''); }
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 (2)
Previous results
Fork
Test case name
Result
className
classList
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36
Browser/OS:
Chrome 123 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=579049" width="100%" height="500px"></iframe>
className
1K/s
classList
1K/s
View exact numbers
Test name
Executions per second
✓
className
1,225 Ops/sec
classList
1,062 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested. **Benchmark Overview** The benchmark is designed to compare the performance of two approaches for adding and removing classes from an HTML element: 1. `className` (using string concatenation) 2. `classList` (using a CSS class list API) **What's being tested?** In each test case, we have a simple script that performs a loop 1000 times on the HTML element `<div id="foo">`. The goal is to measure how many executions per second (ExecutionsPerSecond) each approach can achieve. **Options compared:** 1. `className`: This option uses string concatenation to add and remove classes from the element. Specifically, it appends `' bar'` to the existing class name using `element.className += " bar";`, and then removes the added class by replacing `' bar'` with an empty string using `element.className = element.className.replace(' bar', '');`. 2. `classList`: This option uses the CSS class list API to add and remove classes from the element. Specifically, it adds a new class `'bar'` using `element.classList.add('bar');`, and then removes the added class using `element.classList.remove('bar');`. **Pros and Cons of each approach:** 1. `className`: * Pros: Lightweight and simple to implement. * Cons: Can lead to inefficient string concatenation, potentially leading to slower performance. 2. `classList`: * Pros: More efficient and modern way to manage classes using the CSS class list API. * Cons: Requires access to a modern browser's DOM APIs. **Library used in test cases** None are explicitly mentioned in the provided benchmark definition or code snippets, but it's likely that both options use standard JavaScript functionality. **Special JS feature or syntax** There isn't any special JavaScript feature or syntax being tested here. The focus is on comparing two different approaches to add and remove classes from an HTML element. **Other alternatives:** 1. Using `style` attribute instead of `className`: This approach would involve setting the `style` attribute's `className` property instead of using the `className` property directly. 2. Using a library like jQuery: This could potentially offer a more convenient and efficient way to manage classes, but may also introduce additional overhead. Keep in mind that the results of this benchmark will provide insight into which approach is generally faster and more efficient for different browsers and versions.
Related benchmarks
jQuery removeClass vs classList.remove
Comments
Confirm delete:
Do you really want to delete benchmark?