Benchmark: add class methods

HTML Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
setAttribute
classList
className

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chrome 81 on Linux

View result in a separate tab

Test name	Executions per second
setAttribute	2033.2 Ops/sec
classList	538.9 Ops/sec
className	3689.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**What is being tested?**

The provided JSON represents a microbenchmarking test suite for JavaScript, specifically focusing on how three different approaches are compared when setting the `class` attribute (or equivalent) of an HTML element.

The individual test cases are:

1. Using `setAttribute`: Setting the `class` attribute using the `setAttribute` method.
2. Using `classList.add()`: Setting the `class` attribute by adding classes to an element's `classList` property using the `add()` method.
3. Using `className`: Setting the `class` attribute by assigning a string value to an element's `className` property.

**Options compared:**

The three options being compared are:

1. **`setAttribute`**: This method sets the specified attribute on an element, replacing any existing value. It's a basic, low-level method for setting attributes.
2. **`classList.add()`**: This method adds one or more classes to an element's `classList` property, which is a collection of class names. This approach is often considered more efficient and convenient than using `setAttribute`.
3. **`className`**: This property sets the value of an element's class attribute, similar to using `setAttribute`. However, it's a single-value property, whereas `class` is an array-like object.

**Pros and cons:**

1. **`setAttribute`**:
	* Pros: Simple, widely supported, and easy to use.
	* Cons: Can be slower due to the need for string manipulation, and it replaces existing values instead of appending new ones.
2. **`classList.add()`**:
	* Pros: More efficient, convenient, and flexible than `setAttribute`. It doesn't replace existing values and allows for more granular control over class names.
	* Cons: Requires Modern JavaScript (ES6+) support, as it introduces a new API.
3. **`className`**:
	* Pros: Simple and easy to use, similar to `setAttribute`.
	* Cons: Single-value property, which can lead to limitations in terms of flexibility and control.

**Libraries used:**

None are explicitly mentioned in the provided JSON.

**Special JS features or syntax:**

No special features or syntax are used in this benchmark. The test cases focus on standard JavaScript methods for setting class attributes.

**Other alternatives:**

If `classList.add()` is not supported, other alternatives might include:

1. Using `setAttribute` with a string containing multiple class names separated by spaces.
2. Implementing a custom solution using bitwise operations or string manipulation to achieve the desired effect.

However, these alternatives are less efficient and less convenient than using `classList.add()`.

Related benchmarks:

add class methods (version: 0)

Comparing performance of: setAttribute vs classList vs className

Created: 4 years ago by: Guest

Jump to the latest result

setAttribute

classList

className

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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