Benchmark: className vs. setAttribute vs. classList - add/remove class

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className = "bar"; element.className = ""; }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("class", "bar"); element.removeAttribute("class"); }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("bar"); element.classList.remove("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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of three different approaches for adding and removing classes from an HTML element: `className`, `setAttribute`, and `classList`. The test cases are designed to simulate a scenario where an element's class is toggled 1000 times, which helps to evaluate the overhead of each approach.

**Options Compared**

1. **`className`**: This approach involves setting the `className` property directly on the element using the dot notation (`element.className = "bar"`). This method is often used in older JavaScript versions and may not be as efficient as other approaches.
2. **`setAttribute`**: This approach involves setting the `class` attribute explicitly using the `setAttribute` method (`element.setAttribute("class", "bar")`). This method allows for more flexibility, but may incur additional overhead due to the attribute's existence on the DOM element.
3. **`classList`**: This approach uses the `classList` API (introduced in ECMAScript 2017) to add and remove classes from an element using the `add` and `remove` methods (`element.classList.add("bar")` and `element.classList.remove("bar"`). This method is designed for modern browsers and provides a more efficient way of manipulating classes.

**Pros and Cons**

1. **`className`**:
	* Pros: Simple and straightforward.
	* Cons: May incur additional overhead due to the use of the dot notation, which creates a property on the element's prototype.
2. **`setAttribute`**:
	* Pros: Provides more flexibility and control over the attribute's existence.
	* Cons: May incur additional overhead due to the explicit setting of the attribute, and may require additional parsing by the browser to determine the intended class name.
3. **`classList`**:
	* Pros: Designed for modern browsers and provides a more efficient way of manipulating classes using the `add` and `remove` methods.
	* Cons: May not be supported in older browsers or environments that do not support the ECMAScript 2017 standard.

**Library and Purpose**

In this benchmark, the `classList` API is used to add and remove classes from an element. The `classList` API provides a way to manage class lists on DOM elements, allowing for more efficient manipulation of classes compared to traditional methods like `setAttribute`.

**Special JS Feature or Syntax**

This benchmark uses the ECMAScript 2017 syntax (`element.classList.add("bar")`) which is not supported in older JavaScript versions. It's recommended to use this syntax only when targeting modern browsers that support it.

**Other Alternatives**

In addition to the three approaches mentioned above, other alternatives for adding and removing classes from an element include:

* Using a library like jQuery (which provides a `toggleClass` method) or Lodash (which provides a `classify` function)
* Setting the `style` attribute with `className` as a value (although this approach is not recommended due to its potential drawbacks, such as increased CSS parsing overhead)
* Manipulating the element's DOM node directly using techniques like setting `innerHTML` and parsing the HTML string to extract class names.

Related benchmarks:

className vs. setAttribute vs. classList - add/remove class (version: 0)

Comparing performance of: className vs setAttribute vs classList

Created: 7 years ago by: Guest

Jump to the latest result

className

setAttribute

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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