Benchmark: classList.add vs setAttribute

HTML Preparation code:

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

Script Preparation code:

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

Tests:

setAttribute
el.setAttribute('mytest', 'true')
classList.add
el.classList.add('mytest')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
setAttribute
classList.add

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36

Browser/OS: Chrome 139 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
setAttribute	5387300.0 Ops/sec
classList.add	11639783.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and what pros and cons of each approach are.

**Benchmark Definition**

The benchmark is testing two different approaches to add a class or attribute to an HTML element: `classList.add` vs `setAttribute`.

**What's being tested?**

In this case, we're comparing the performance of:

1. **`classList.add`**: This method adds a specified class to an element. It's part of the W3C DOM specification and is supported by most modern browsers.
2. **`setAttribute`**: This method sets the value of an attribute on an element. In this case, we're setting the `mytest` attribute with the value `true`.

**Options compared**

The two options are being compared in terms of execution time (measured in executions per second). The benchmark aims to determine which approach is faster.

**Pros and Cons of each approach:**

1. **`classList.add`**:
	* Pros:
		+ More intuitive and concise code
		+ Less prone to errors, as it's a standard DOM method
		+ Works with multiple classes at once
	* Cons:
		+ May not be supported by older browsers or in specific situations (e.g., IE 8-10)
2. **`setAttribute`**:
	* Pros:
		+ Widespread support across browsers and versions
		+ Can be used for more complex attribute manipulation
	* Cons:
		+ More verbose code, potentially leading to errors if not used carefully
		+ May not work as expected in certain situations (e.g., with multiple classes)

**Library usage**

Neither `classList.add` nor `setAttribute` rely on a specific library. They are both built-in DOM methods.

**Special JS features or syntax**

This benchmark does not use any special JavaScript features or syntax that would affect the execution or outcome of the test.

**Other alternatives**

If you were to implement this benchmark yourself, alternative approaches might include:

* Using `element.style` instead of `classList.add` or `setAttribute`
* Using a library like jQuery to manipulate elements and attributes
* Implementing custom methods for element manipulation (e.g., using vanilla JavaScript)

Keep in mind that these alternatives would likely have different performance characteristics and may not be as widely supported across browsers.

**Benchmark preparation code**

The provided script preparation code is:
```javascript
var el = document.getElementById('test');
```
This sets up an HTML element with the ID `test` and assigns it to a variable named `el`. The corresponding HTML file should include:
```html
<div id="test">Testing</div>
```
This creates an empty `<div>` element with the specified ID, which is then manipulated by the JavaScript code.

**Latest benchmark result**

The provided raw UAFS (User Agent Fingerprint String) data shows the results for two Firefox 130 runs:

* `setAttribute`: approximately 9.29 million executions per second
* `classList.add`: approximately 4.83 million executions per second

Please note that these values are specific to the given test scenario and may vary depending on your environment, browser version, and other factors.

Related benchmarks:

classList.add vs setAttribute (version: 0)

Which is faster? Adding a class to an element of setting an attribute on it?

Comparing performance of: setAttribute vs classList.add

Created: 2 years ago by: Guest

Jump to the latest result

setAttribute

classList.add

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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