Benchmark: className vs. setAttribute vs. classList with replacements

HTML Preparation code:

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

Tests:

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

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.

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

**Benchmark Definition**

The benchmark is testing three different approaches to dynamically set the class name of an HTML element:

1. `className` property: This approach sets the `class` attribute directly on the `element` object using its `className` property.
2. `setAttribute` method: This approach uses the `setAttribute` method to set the `class` attribute explicitly.
3. `classList` API: This approach uses the `classList` API, which allows you to add or remove classes from an element without setting the entire class list.

**Options Compared**

The benchmark is comparing these three approaches in terms of performance, specifically the number of executions per second on a desktop device running Chrome 90.

**Pros and Cons of Each Approach**

1. `className` property:
	* Pros: Simple and straightforward, no additional dependencies required.
	* Cons: May not be supported in older browsers or under certain security restrictions.
2. `setAttribute` method:
	* Pros: Widely supported across browsers, no additional dependencies required.
	* Cons: Can lead to slower performance due to the need to create a new attribute value string.
3. `classList` API:
	* Pros: More efficient than setting the class list directly, as it only adds or removes classes without creating a new attribute value string.
	* Cons: Requires modern browsers that support the `classList` API.

**Library and Purpose**

None of the benchmarked approaches rely on external libraries. They are all part of the standard HTML and JavaScript APIs.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax being tested in this benchmark. It only involves standard DOM manipulation and property access.

**Other Alternatives**

If you're looking for alternative approaches to set class names, you might consider using CSS classes with `classList` API:

```javascript
element.classList.add('bar');
```

Or, if you need to support older browsers, you could use a library like jQuery's `addClassClass()` method or a polyfill for the `classList` API.

For more advanced scenarios, you might consider using CSS classes with JavaScript and the `querySelectorAll()` method:

```javascript
const elements = document.querySelectorAll('.bar');
```

Keep in mind that these alternatives may introduce additional dependencies or complexity.

Related benchmarks:

className vs. setAttribute vs. classList with replacements (version: 0)

Comparing performance of: className vs setAttribute vs classList

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