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"); }

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

Test name	Executions per second
className	4457.4 Ops/sec
setAttribute	3162.0 Ops/sec
classList	2644.7 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

Related benchmarks:

className vs setAttribute vs classList (version: 0)

Comparing performance of: className vs setAttribute vs classList

Created: 6 years ago by: Registered User

Jump to the latest result

className

setAttribute

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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