Benchmark: className vs. classList

HTML Preparation code:

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

Tests:

className =
var element = document.getElementById('foo'); var i = 1000; while (i--) { element.className = 'bar'; element.className = ''; }
className +=
var element = document.getElementById('foo'); var i = 1000; while (i--) { element.className += ' bar'; element.className = ''; }
classList
var element = document.getElementById('foo'); var i = 1000; while (i--) { element.classList.add('bar'); element.className = ''; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className =
className +=
classList

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 days ago)

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

Browser/OS: Chrome 147 on Windows

View result in a separate tab

Test name	Executions per second
className =	1283.4 Ops/sec
className +=	1324.2 Ops/sec
classList	1344.3 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 benchmark and its test cases.

**What is tested?**

The benchmark measures the performance difference between three approaches to set or clear the `className` property of an HTML element:

1. Direct assignment: `element.className = 'bar';`
2. Concatenation with a space: `element.className += ' bar';`
3. Using the `classList` API: `element.classList.add('bar');`

**Options compared**

The benchmark compares the performance of these three approaches because they are commonly used in JavaScript code to set or clear class names on HTML elements.

**Pros and cons of each approach**

1. **Direct assignment (`element.className = 'bar';`)**:
	* Pros: Simple, straightforward, and widely supported.
	* Cons: May lead to slower performance due to the need to parse the `className` string every time it's set or cleared.
2. **Concatenation with a space (`element.className += ' bar';`)**:
	* Pros: May be slightly faster than direct assignment since it avoids parsing the entire `className` string.
	* Cons: Less efficient than direct assignment and can lead to slower performance if concatenating multiple strings together.
3. **Using the `classList` API (`element.classList.add('bar');`)**:
	* Pros: Fast, modern, and widely supported (although not yet widely adopted).
	* Cons: May require more setup or configuration, especially in older browsers.

**Library and purpose**

In this benchmark, the `classList` property is used to add a class name to an element. The `classList` API provides a way to work with classes that's similar to setting or clearing the `className` property, but it's generally considered faster and more efficient.

**Special JavaScript feature or syntax**

There is no special JavaScript feature or syntax being tested in this benchmark. It's focused on comparing the performance of three common approaches to set or clear class names on HTML elements.

**Other alternatives**

If you're interested in exploring alternative approaches, here are a few:

* Using `setAttribute()` instead of `className` or `classList`: This approach sets an attribute named "class" with the desired value.
* Using a library like jQuery or Lodash to handle class names: These libraries provide functions for working with classes that can be more convenient than manual implementation.

Keep in mind that these alternatives may have their own trade-offs and performance implications, so it's essential to test them thoroughly if you're considering using an alternative approach.

Related benchmarks:

className vs. classList (version: 4)

Fork from https://measurethat.net/Benchmarks/Show/54/0/classname-vs-setattribute-vs-classlist

Comparing performance of: className = vs className += vs classList

Created: 8 years ago by: Registered User

Jump to the latest result

className =

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