Benchmark: className vs. setAttribute vs. classList

HTML Preparation code:

<div id="foo"></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.add("bar"); }

Historical Performance Data aggregated from 165 community runs

Desktop Results:

Chrome 108 runs

className

16K/s

setAttribute

10K/s

classList

6K/s

Fastest: className (2.8x faster)

View exact numbers

✓ className: 15,669 ops/sec
• setAttribute: 9,850 ops/sec
• classList: 5,622 ops/sec

Firefox 37 runs

className

20K/s

setAttribute

13K/s

classList

7K/s

Fastest: className (3.0x faster)

View exact numbers

✓ className: 19,871 ops/sec
• setAttribute: 12,571 ops/sec
• classList: 6,671 ops/sec

Safari 12 runs

className

30K/s

setAttribute

17K/s

classList

12K/s

Fastest: className (2.4x faster)

View exact numbers

✓ className: 29,776 ops/sec
• setAttribute: 17,477 ops/sec
• classList: 12,390 ops/sec

Mobile Results:

Chrome 8 runs

className

9K/s

setAttribute

7K/s

classList

4K/s

Fastest: className (2.5x faster)

View exact numbers

✓ className: 8,757 ops/sec
• setAttribute: 6,622 ops/sec
• classList: 3,519 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 142 on Windows

View result in a separate tab

className

4K/s

setAttribute

3K/s

classList

1K/s

View exact numbers

Test name	Executions per second
✓ className	4,068 Ops/sec
setAttribute	3,140 Ops/sec
classList	1,180 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, the options being compared, their pros and cons, and other considerations.

**Benchmark Overview**

The benchmark measures the performance difference between three ways to set or update the `class` attribute of an HTML element: using the `className` property, the `setAttribute` method, and the `classList` API (part of the DOM Standard).

**Test Cases**

Each test case represents a specific scenario:

1. **className**: Sets the `class` attribute directly using the `element.className = "bar"` syntax.
2. **setAttribute**: Sets the `class` attribute using the `element.setAttribute("class", "bar")` method.
3. **classList**: Adds or updates the `class` attribute using the `element.classList.add("bar")` API.

**Library and Syntax Considerations**

The benchmark uses a mix of:

* Vanilla JavaScript (no libraries)
* DOM Standard (`classList` API)

The `classList` API is a part of the DOM Standard, which provides a way to manage classes in a more modern and efficient manner. It's supported by most modern browsers.

**Options Being Compared**

The three options being compared are:

1. **className**: Directly setting the `class` attribute using the property syntax.
	* Pros: Simple, widely supported, and often used in legacy code.
	* Cons: May not be as efficient or flexible as other methods.
2. **setAttribute**: Setting the `class` attribute using the `setAttribute` method.
	* Pros: More versatile than `className`, allows for setting multiple attributes at once.
	* Cons: May be slower due to the additional overhead of the `setAttribute` method.
3. **classList**: Using the `classList` API to manage classes.
	* Pros: Efficient, modern, and flexible; provides a way to add, remove, or toggle classes.
	* Cons: May not work in older browsers that don't support the DOM Standard.

**Other Considerations**

When choosing between these options, consider the following:

* **Legacy code**: If working with existing legacy code that uses `className`, you may want to stick with it for compatibility reasons. However, if possible, consider refactoring to use more modern and efficient methods like `classList`.
* **Performance**: In general, using the `classList` API is likely to be faster and more efficient than setting the `class` attribute directly or using the `setAttribute` method.
* **Flexibility**: If you need to set multiple attributes at once or perform class-related operations, `setAttribute` might be a better choice.

**Alternatives**

Other alternatives for managing classes in HTML elements include:

* Using a CSS class selector (e.g., `.class-name`) and applying it using the `classList.toggle()` method.
* Implementing custom solutions using JavaScript events or other mechanisms.

Keep in mind that these alternatives may have different trade-offs in terms of performance, flexibility, and compatibility.

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

Comparing performance of: `className vs setAttribute vs classList`

Created: 9 years ago by: Guest

Go to the latest result

className

setAttribute

classList

Historical Performance Data aggregated from 165 community runs

Desktop Results:

Chrome 108 runs

Firefox 37 runs

Safari 12 runs

Mobile Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Comparing performance of: className vs setAttribute vs classList

Created: 9 years ago by: Guest

Go to the latest result

className

setAttribute

classList

Historical Performance Data aggregated from 165 community runs

Desktop Results:

Chrome 108 runs

Firefox 37 runs

Safari 12 runs

Mobile Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `className vs setAttribute vs classList`