Benchmark: className vs classList add,remove

HTML Preparation code:

<div id="foo" class="fizz"></div>

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { if (i % 2 === 0) { element.className += "buzz"; } else { element.className = "fizz"; } }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { if (i % 2 === 0) { element.classList.add("buzz"); } else { element.classList.remove("buzz"); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
classList

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36

Browser/OS: Chrome 139 on Windows

View result in a separate tab

Test name	Executions per second
className	1419.8 Ops/sec
classList	1057.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark and explain what is being tested, the different approaches compared, their pros and cons, and other considerations.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmarking test, specifically comparing two approaches to dynamically modify class names of an HTML element: `className` and `classList.add()`/`.remove()` methods. The test creates an HTML element with a class name "fizz" and then iterates over 1000 iterations, appending or removing the string "buzz" from the class name based on an even-odd condition.

**Approaches Compared**

There are two approaches being compared:

1. **`className` approach**: This method appends or removes strings from the existing class names using the `+=` operator and assignment operator (`=`). For example: `element.className += "buzz";`.
2. **`classList.add()`/`.remove()` approach**: This method uses the `classList` property, which is a read-only list of class names that can be modified using the `add()` and `remove()` methods. For example: `element.classList.add("buzz");`.

**Pros and Cons**

**`className` approach:**

Pros:

* Simple and straightforward implementation.
* Works on older browsers that do not support `classList`.
* Does not require any additional library or API.

Cons:

* Can lead to performance issues due to repeated string concatenations and assignments, which can create new strings in memory.
* May cause unexpected behavior if the class names are very long or contain special characters.

**`classList.add()`/`.remove()` approach:**

Pros:

* More efficient than the `className` approach, as it avoids creating new strings and only modifies the existing list of class names.
* Allows for more fine-grained control over class name modifications.
* Works on modern browsers that support `classList`.

Cons:

* Requires JavaScript to access the `classList` property, which may not be supported in older browsers.
* May require additional library or API if using a version of JavaScript that does not support `classList`, such as ECMAScript 2015+.

**Other Considerations**

* The test uses a simple even-odd condition to append or remove class names, which may not accurately reflect real-world scenarios where more complex logic is used.
* The benchmark measures the number of executions per second (ExecutionsPerSecond), but does not account for other performance metrics such as execution time or memory usage.

**Library Usage**

The test uses no additional libraries or APIs beyond what is built into modern JavaScript browsers. However, if using an older browser that does not support `classList`, a polyfill may be required to implement the `classList` property and its methods.

There are other alternatives for modifying class names in JavaScript, such as:

* Using a library like jQuery's `.addClass()`/`.removeClass()` methods.
* Utilizing CSS classes and JavaScript events to dynamically apply or remove class names.
* Implementing custom solutions using bitwise operations or string manipulation techniques.

These alternatives may offer different trade-offs in terms of performance, complexity, and browser support.

Related benchmarks:

className vs classList add,remove (version: 0)

Comparing performance of: className vs classList

Created: 2 years ago by: Guest

Jump to the latest result

className

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):