Benchmark: setAttribute vs classList.add (attribute adding)

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.getAttribute("class") + " 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: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0

Browser/OS: Firefox 122 on Windows

View result in a separate tab

Test name	Executions per second
classList.add	8051140.5 Ops/sec
setAttribute	2313.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested on the provided JSON.

**Benchmark Definition**

The benchmark is comparing two approaches to adding an attribute (class in this case) to an HTML element using JavaScript:

1. `classList.add()`: This method is part of the DOM API, which provides a convenient way to manage classes on an element.
2. `setAttribute()`: This method is used to set the value of an attribute on an element.

**Options Compared**

The benchmark is comparing these two approaches in terms of performance.

**Pros and Cons**

* `classList.add()`:
	+ Pros:
		- More concise and readable code
		- Less error-prone, as it automatically handles cases where the class already exists
	+ Cons:
		- May not be supported in older browsers or versions of JavaScript (before ECMAScript 2015)
* `setAttribute()`:
	+ Pros:
		- More versatile, as it can be used to set any attribute, not just classes
	+ Cons:
		- Longer and less readable code
		- May lead to errors if the class already exists or is set to an invalid value

**Library Used**

The `classList` property is part of the DOM API, which is a standard library in modern browsers. The purpose of `classList.add()` is to add a class to an element and update its classes list accordingly.

**Special JavaScript Feature/Syntax**

This benchmark doesn't use any special JavaScript features or syntax. It only uses standard JavaScript methods and properties (e.g., `document.getElementById()`, `setAttribute()`, etc.).

**Other Alternatives**

If you wanted to test other approaches, some alternatives could be:

* Using a CSS class instead of the `classList` property
* Using a custom library or function to add classes
* Testing different attribute names (e.g., `style` instead of `class`)
* Testing different browsers or versions of JavaScript

However, for this specific benchmark, comparing `classList.add()` and `setAttribute()` is a good starting point, as it highlights the trade-offs between conciseness, readability, and performance.

Related benchmarks:

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

Comparing performance of: classList.add vs setAttribute

Created: 5 years ago by: Registered User

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