Benchmark: className vs. setAttribute vs. classList (multiple classes A)

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className = ""; element.className = "bar foo laa"; }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className = ""; element.setAttribute("class", "bar foo laa"); }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className = ""; element.classList.add("bar", "foo", "laa"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
setAttribute
classList

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark definition and test cases measure the performance of three approaches: setting a class name, using `setAttribute` to set a class name, and using the `classList` API.

**Benchmark Definition**

The benchmark definition represents the setup for each test case. It includes:

* A description of the test (empty in this case)
* Script preparation code (empty in this case)
* HTML preparation code: a simple HTML fragment with an element named "foo"

**Test Cases**

There are three test cases, each representing a different approach to set the class name on an element.

1. **className**: This approach uses the `className` property directly to set the class name.
2. **setAttribute**: This approach uses the `setAttribute` method to set the value of the "class" attribute, which is then parsed as a space-separated list of classes.
3. **classList**: This approach uses the `classList` API, which provides a more modern and efficient way to manage class lists.

**Comparison**

The three approaches have different performance characteristics:

* **className**: This approach is generally considered the fastest, as it involves a simple string manipulation operation.
* **setAttribute**: This approach involves parsing the "class" attribute value as a space-separated list of classes, which can be slower than direct assignment. However, this approach provides more flexibility, as it allows for easier modification of class names using the `split()` and `join()` methods.
* **classList**: This approach is generally considered the fastest and most efficient, as it uses a native API that is optimized by the browser engine.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **className**:
	+ Pros: Fastest execution time
	+ Cons: Limited flexibility (cannot easily modify class names)
* **setAttribute**:
	+ Pros: Provides more flexibility for modifying class names
	+ Cons: Slower execution time due to parsing required
* **classList**:
	+ Pros: Fastest and most efficient execution time, provides a modern API for managing class lists
	+ Cons: None notable

**Libraries and Special JS Features**

There is no library used in this benchmark. However, the `classList` API is a modern JavaScript feature that was introduced in ECMAScript 2017 (ES7).

**Alternatives**

If you want to explore alternative approaches or libraries for managing class names, here are some options:

* **DOM TokenList**: This is a built-in Web API for working with class lists, which provides similar functionality to the `classList` API.
* **DOM Element**: You can also use the `DOM Element` interface to manipulate class names manually, using the `className` property or the `setAttribute` method.
* **Third-party libraries**: There are several third-party libraries available that provide additional features and flexibility for managing class names, such as CSS-in-JS solutions like Emotion or styled-components.

Related benchmarks:

className vs. setAttribute vs. classList (multiple classes A) (version: 0)

Comparing performance of: className vs setAttribute vs classList

Created: 2 years ago by: Guest

Jump to the latest result

className

setAttribute

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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