Benchmark: className vs classList with existing classes

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; element.className = "foo baz bob alice"; while (i--) { element.className = "foo baz bob alice bar"; }
classList
var element = document.getElementById("foo"); var i = 1000; var cl = element.classList; cl.add("foo", "baz", "bob", "alice"); while (i--) { cl.add("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: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Linux

View result in a separate tab

Test name	Executions per second
className	18234.5 Ops/sec
classList	3932.9 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 world of JavaScript microbenchmarks on MeasureThat.net.

**What is tested?**

The provided benchmark tests two approaches to updating the `className` property of an HTML element: using the `className` assignment syntax (with existing classes) and using the `classList` API (add method).

**Options compared**

There are two options being compared:

1. **`className` assignment syntax**: This approach assigns a string value that contains multiple classes to the `className` property. The resulting string is then used as the new class name.
2. **`classList` API (add method)**: This approach uses the `classList` API, which provides an array-like object for managing classes. It adds multiple classes using the `add()` method.

**Pros and Cons**

### `className` assignment syntax

Pros:

* Simple and straightforward
* Native JavaScript syntax

Cons:

* Can lead to class name collisions if not properly managed (e.g., using a single string with multiple classes)
* May have performance implications due to string concatenation and resolution

### `classList` API (add method)

Pros:

* More efficient, as it avoids string concatenation and resolution
* Provides a clear and explicit way to manage class names

Cons:

* Requires the use of the `classList` API, which may not be supported in older browsers
* May require more memory allocation for the `classList` object

**Library/Feature**

No specific library is used in this benchmark. However, it's worth noting that the `classList` API was introduced in ECMAScript 2015 (ES6) and has since become a standard feature in modern JavaScript engines.

**Special JS feature/syntax**

There are no special features or syntaxes being tested in this benchmark. The code uses only standard JavaScript syntax.

**Other alternatives**

If you were to test alternative approaches, some options could include:

* Using the `setAttribute()` method with `className` attribute: `element.setAttribute('className', 'foo baz bob alice');`
* Using a library like jQuery's `.addClasses()` method: `$('div#foo').addClasses(['foo', 'baz', 'bob', 'alice']);`

Keep in mind that these alternatives might have different performance characteristics, compatibility issues, or other trade-offs compared to the `className` assignment syntax and `classList` API.

Overall, this benchmark provides a simple and informative way to compare the performance of two common approaches to updating class names in JavaScript.

Related benchmarks:

className vs classList with existing classes (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):