Benchmark: className vs setAttribute vs classList

HTML Preparation code:

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

Script Preparation code:

var element = document.getElementById('foo');

Tests:

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

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 28 runs

className

7K/s

setAttribute

5K/s

classList

4K/s

Fastest: className (1.9x faster)

View exact numbers

✓ className: 6,707 ops/sec
• setAttribute: 4,584 ops/sec
• classList: 3,583 ops/sec

Firefox 6 runs

className

24K/s

setAttribute

14K/s

classList

7K/s

Fastest: className (3.2x faster)

View exact numbers

✓ className: 24,089 ops/sec
• setAttribute: 13,813 ops/sec
• classList: 7,447 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 year ago)

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

Browser/OS: Chrome 114 on Windows

View result in a separate tab

className

4K/s

setAttribute

3K/s

classList

3K/s

View exact numbers

Test name	Executions per second
✓ className	4,457 Ops/sec
setAttribute	3,162 Ops/sec
classList	2,645 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 explanation of the provided benchmark.

**Benchmark Overview**

The benchmark compares three different approaches to dynamically set the class name of an HTML element: `className`, `setAttribute` (with `class` attribute), and `classList`. The test is designed to measure which approach is the fastest on various devices running Firefox Mobile 131.

**Approaches Compared**

1. **`className`**: This method sets the class name directly using the `className` property of the element.
2. **`setAttribute` (with `class` attribute)**: This method uses the `setAttribute` method to set the `class` attribute of the element, which is then parsed by the browser to extract the class names.

**Pros and Cons**

* `className`: Pros:
	+ Lightweight and efficient
	+ Directly sets the class name without any additional parsing or processing
* Cons:
	+ May require additional processing or parsing in older browsers that don't support this property
* `setAttribute` (with `class` attribute): Pros:
	+ Works on all devices and browsers, including those that may not support the `className` property
	+ Can be more flexible for setting multiple class names at once
* Cons:
	+ May require additional parsing or processing to extract the class names from the `class` attribute
	+ Can lead to slower performance due to this extra processing

**Library Used**

None of the test cases use any external libraries. The benchmark is focused on measuring the performance of JavaScript code.

**Special JS Feature/Syntax**

The benchmark uses a common pattern in JavaScript: the use of `while` loops to iterate over a large number of iterations (in this case, 1000). This can be seen as a way to measure the performance of the code under heavy loads or with high CPU utilization. Additionally, the benchmark uses the `document.getElementById` method to retrieve an HTML element by its ID, which is a standard DOM API method.

**Other Alternatives**

If you were to modify this benchmark to test alternative approaches, some possible alternatives could be:

* Using a different class name setting approach, such as using the `style` property or CSS classes
* Adding more elements to the HTML structure to increase the complexity of the benchmark
* Using a different type of loop or iteration mechanism, such as a for loop or recursion
* Incorporating additional performance-related metrics, such as memory usage or CPU utilization

className vs setAttribute vs classList (version: 0)

Comparing performance of: `className vs setAttribute vs classList`

Created: 6 years ago by: Registered User

Go to the latest result

className

setAttribute

classList

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 28 runs

Firefox 6 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: 6 years ago by: Registered User

Go to the latest result

className

setAttribute

classList

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 28 runs

Firefox 6 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`