Benchmark: className vs. setAttribute vs. classList v3

HTML Preparation code:

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

Tests:

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

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: 2 years ago)

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

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
className	26874.5 Ops/sec
setAttribute	17622.3 Ops/sec
classList	1839.6 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 world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided benchmark tests three different ways to set the class names of an HTML element: `className`, `setAttribute`, and `classList` (with version 3). The goal is to determine which approach is the fastest.

**Options Compared**

1. **`className`**: This method sets the class name using a string literal, like `element.className = "bar bar2 bar3";`.
	* Pros: Simple, easy to read, and widely supported.
	* Cons: May have performance implications due to the creation of a new string object.
2. **`setAttribute`**: This method sets a CSS attribute on the element using the `setAttribute` method, like `element.setAttribute("class", "bar bar2 bar3");`.
	* Pros: Allows for more control over the attribute name and value, which can be beneficial in certain scenarios.
	* Cons: May require additional parsing or processing to extract the class names from the attribute value.
3. **`classList` (with version 3)**: This method uses the `classList` property of the element, like `element.classList.add("bar");`, and the `add` method is called multiple times to add all class names.
	* Pros: Efficient for adding multiple classes at once, as it only requires a single call to `add`.
	* Cons: May have performance implications if the number of classes added is large.

**Library Used**

In this benchmark, none of the test cases use any external libraries. However, it's worth noting that modern browsers and JavaScript engines often include internal optimizations or caching for certain DOM operations, which can affect the performance of these benchmarks.

**Special JS Feature/Syntax**

There are no special JS features or syntax used in this benchmark, aside from the `classList` property, which is a relatively recent addition to the ECMAScript standard.

**Other Alternatives**

If you're interested in exploring alternative approaches for setting class names, some other options include:

* Using a CSS class list (e.g., `[class] = 'bar bar2 bar3';` in modern browsers).
* Creating a custom getter or setter function on the element's prototype to control access to its class names.
* Utilizing third-party libraries like jQuery or Lodash for DOM manipulation.

In summary, this benchmark provides a useful comparison of three common methods for setting class names on an HTML element. The results can help developers understand the performance implications of their chosen approach and make informed decisions about their codebase.

Related benchmarks:

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

Comparing performance of: className vs setAttribute vs classList

Created: 2 years ago by: Guest

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