Benchmark: setAttribute vs classList.add (attribute adding) V2

HTML Preparation code:

<div id="test" class="first">Testing</div>

Script Preparation code:

var el = document.getElementById('test');

Tests:

classList.add
el.classList.add("second");
setAttribute
el.setAttribute("class", el.className + " second");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classList.add
setAttribute

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

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

Browser/OS: Chrome 109 on Windows

View result in a separate tab

Test name	Executions per second
classList.add	1595818.8 Ops/sec
setAttribute	1902.4 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.

**Benchmark Overview**

The benchmark compares two approaches for adding an attribute (or class) to an HTML element: using `classList.add()` and using `setAttribute()`. The test case is designed to measure the performance difference between these two methods, which are commonly used in JavaScript development.

**Options Compared**

Two options are compared:

1. **`classList.add()`**: This method adds a class (i.e., attribute) to an element's class list. It's a modern and concise way to modify an element's classes.
2. **`setAttribute()`**: This method sets the value of a named attribute on an element. In this case, it's used to add a new class to an element.

**Pros and Cons**

**`classList.add()`**:

Pros:

* Modern and widely supported (most browsers support `classList` since 2015)
* More concise and readable code
* Easier to manage class names and avoid duplication

Cons:

* May not be supported in older browsers or environments
* Can be slower than `setAttribute()` due to the overhead of manipulating a class list

**`setAttribute()`**:

Pros:

* Widespread support across older browsers and environments
* Faster execution time, as it directly sets an attribute without creating a class list

Cons:

* More verbose code (requires more characters)
* Can lead to errors if not used carefully (e.g., invalid attribute names or values)

**Other Considerations**

When deciding between `classList.add()` and `setAttribute()`, consider the following factors:

* **Browser support**: If you need to support older browsers, `setAttribute()` might be a better choice.
* **Code readability and maintainability**: Use `classList.add()` for more concise and readable code.
* **Performance**: In most cases, `classList.add()` is faster than `setAttribute()`, but the difference may not be noticeable in all scenarios.

**Libraries and Special Features**

In this benchmark, there are no libraries used. However, it's worth noting that some JavaScript frameworks or libraries (e.g., React) might have their own classes for managing class names, which could affect the performance of `classList.add()` and `setAttribute()`.

As for special JS features or syntax, there is none mentioned in this benchmark definition.

**Alternatives**

If you're interested in exploring alternative approaches to adding attributes or classes to elements, consider:

* **`DOM Triton`**: A web standards library that provides a more modern and efficient way of manipulating the DOM.
* **`fast-class-list`**: A lightweight library for managing class lists, which can be used with `classList.add()` for improved performance.

These alternatives might offer better performance or features than `classList.add()`, but their adoption is still limited compared to the standard `classList` API.

Related benchmarks:

setAttribute vs classList.add (attribute adding) V2 (version: 0)

Comparing performance of: classList.add vs setAttribute

Created: 5 years ago by: Guest

Jump to the latest result

classList.add

setAttribute

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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