Benchmark: className vs. setAttribute vs. classList vs setAttribute custom

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"); }
setAttribute custom
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("data-class", "bar"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
setAttribute
classList
setAttribute custom

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chrome 81 on Mac OS X 10.13.4

View result in a separate tab

Test name	Executions per second
className	3364.1 Ops/sec
setAttribute	1855.7 Ops/sec
classList	2279.6 Ops/sec
setAttribute custom	2158.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The MeasureThat.net benchmark compares the performance of three ways to set or modify the `class` attribute on an HTML element: using the `className` property, setting an attribute called `"class"` directly, and using the `classList` API with the `add()` method. Additionally, it also includes a custom approach where an attribute called `"data-class"` is used instead.

**Benchmarked APIs**

1. **`className`**: This approach uses the `className` property to set or modify the `class` attribute. The property returns a string that contains the names of all classes applied to the element, separated by spaces.
2. **`setAttribute`**: This approach sets an attribute called `"class"` directly on the element using the `setAttribute()` method. This is the traditional way to set attributes in JavaScript.
3. **`classList`**: This approach uses the `classList` API with the `add()` method to add or remove classes from the element. The `classList` property returns a `DOMTokenList` object that contains all the classes applied to the element.
4. **`setAttribute custom`**: This is a custom approach where an attribute called `"data-class"` is used instead of the traditional `"class"` attribute.

**Pros and Cons**

1. **`className`**:
	* Pros: Simple, widely supported, and easy to use.
	* Cons: Can lead to slow performance due to the need to parse the entire string of classes.
2. **`setAttribute`**:
	* Pros: Fast, as it directly sets the attribute without any parsing or string manipulation.
	* Cons: May not be as intuitive or widely supported as other approaches.
3. **`classList`**:
	* Pros: More efficient and modern approach, especially for adding multiple classes at once.
	* Cons: Requires more code and may not be supported in older browsers.

**Library Usage**

None of the benchmarked APIs use any external libraries.

**Special JS Features or Syntax**

The `classList` API is a relatively new feature introduced in ECMAScript 2017 (ES7). It provides a modern way to work with classes on elements.

**Other Alternatives**

Some alternative approaches to setting or modifying the `class` attribute include:

1. Using the `style` property and setting the `display` property to "block" or "inline-block".
2. Using the `innerHTML` property and adding the class names directly.
3. Using a library like jQuery, which provides a convenient way to set or modify classes on elements.

However, these alternatives may not be as efficient or widely supported as the benchmarked APIs.

In summary, the MeasureThat.net benchmark compares four different approaches to setting or modifying the `class` attribute on HTML elements, highlighting the trade-offs between simplicity, performance, and modernity.

Related benchmarks:

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

Comparing performance of: className vs setAttribute vs classList vs setAttribute custom

Created: 4 years ago by: Guest

Jump to the latest result

className

setAttribute

classList

setAttribute custom

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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