Benchmark: className vs classList add and remove

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>

Previous results

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

Test name	Executions per second
className	1225.1 Ops/sec
classList	1062.2 Ops/sec

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

LLMs can make mistakes. Check important info.

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:

className vs classList add and remove (version: 0)

Comparing performance of: className vs classList

Created: 5 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):