Benchmark: className vs. setAttribute vs. classList (separately and in one go)

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className = "bar"; element.className = "ding"; }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("class", "bar"); element.setAttribute("class", "ding"); }
classList add separately
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("bar"); element.classList.add("ding"); }
classList add once
var element = document.getElementById("foo"); var i = 1000; var classList = []; while (i--) { classList.push["bar"]; classList.push["ding"]; element.classList.add(...classList); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
setAttribute
classList add separately
classList add once

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/128.0.0.0 Safari/537.36 Edg/128.0.0.0

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
className	2011.2 Ops/sec
setAttribute	1455.4 Ops/sec
classList add separately	1264.8 Ops/sec
classList add once	3610.4 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 on MeasureThat.net.

**Benchmark Definition**

The provided JSON represents a benchmark definition for measuring the performance of three different approaches to modify an element's class list: `className`, `setAttribute`, and `classList`. The benchmark is designed to test how these methods compare in terms of execution speed, particularly when dealing with large numbers of classes to add or remove.

**Options Compared**

The benchmark compares four options:

1. **`className`**: This method sets the `class` attribute directly on the element.
2. **`setAttribute`**: This method uses the `setAttribute` method to set the `class` attribute individually, without using dot notation (e.g., `element.className = 'bar'`).
3. **`classList add separately`**: This method pushes classes onto the element's class list using the `classList.push()` method, followed by calling `classList.add()` with each new class.
4. **`classList add once`**: This method creates an array of classes to add and then passes that array to `classList.add()`, effectively adding all classes in a single operation.

**Pros and Cons**

Here's a brief summary of the pros and cons for each approach:

1. **`className`**:
	* Pros: Simple, straightforward, and efficient.
	* Cons: May lead to slower performance if dealing with large class lists due to attribute manipulation overhead.
2. **`setAttribute`**:
	* Pros: Similar to `className`, but may be slightly faster for small class lists.
	* Cons: Less readable and less intuitive than using dot notation.
3. **`classList add separately`**:
	* Pros: More efficient for large class lists, as it avoids attribute manipulation overhead.
	* Cons: Requires creating an array of classes to add, which can lead to additional memory allocation and garbage collection overhead.
4. **`classList add once`**:
	* Pros: Combines the efficiency of `classList add separately` with the convenience of passing multiple classes at once.
	* Cons: May introduce additional overhead due to array creation and destruction.

**Library**

The benchmark uses the `classList` API, which is a modern JavaScript feature introduced in Internet Explorer 10 and later. The `classList` property provides an easy way to manipulate an element's class list using methods like `add()`, `remove()`, and `toggle()`.

**Special JS Feature/Syntax**

The benchmark utilizes the `push()` method on arrays, which is a standard JavaScript feature since ECMAScript 5 (ES5). The `classList.add()` method also relies on this syntax to append classes to the element's class list.

**Other Alternatives**

If you're interested in exploring alternative approaches for modifying an element's class list, here are some options:

* Using CSS classes: Instead of manipulating the `class` attribute directly, consider using CSS classes and conditionally apply them based on user interactions.
* Using a separate class manager library: Libraries like ClassManager or ClassList Manager provide additional features and optimizations for managing class lists.

Keep in mind that the performance differences between these approaches might be small or negligible in most use cases. MeasureThat.net's benchmark helps identify any potential performance bottlenecks, but it's essential to consider other factors, such as code readability, maintainability, and overall development efficiency, when choosing a solution.

Related benchmarks:

className vs. setAttribute vs. classList (separately and in one go) (version: 0)

Comparing performance of: className vs setAttribute vs classList add separately vs classList add once

Created: one year ago by: Guest

Jump to the latest result

className

setAttribute

classList add separately

classList add once

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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