Benchmark: className vs. setAttribute vs. classList - exclusive

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className = `bar-${i}`; }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("class", `bar-${i}`); }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add(`bar-${i}`); }
classList remove & add
var element = document.getElementById("foo"); var i = 999; element.classList.add(`bar-1000`); while (i--) { element.classList.remove(`bar-${i+1}`); element.classList.add(`bar-${i}`); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
setAttribute
classList
classList remove & add

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/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
className	2277.2 Ops/sec
setAttribute	1855.4 Ops/sec
classList	60.1 Ops/sec
classList remove & add	668.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmark that tests three different approaches to dynamically set class names on an HTML element: `className`, `setAttribute`, and `classList`. The benchmark aims to compare the performance of these approaches, excluding `classList` in one test case (`classList remove & add`).

**Benchmark Definition**

The benchmark definition consists of two parts:

1. **Script Preparation Code**: This is null, which means that no additional script code is required before running the benchmarks.
2. **Html Preparation Code**: A simple HTML div element with an ID "foo" is created using `<div id="foo"></div>`.

**Individual Test Cases**

The benchmark consists of four test cases:

1. **className**: This test case creates a new `while` loop that sets the class name of the element to `bar-<i>`, where `i` ranges from 1000 down to 1.
2. **setAttribute**: Similar to `className`, but uses the `setAttribute` method to set the "class" attribute instead.
3. **classList**: Sets the `bar-<i>` class using the `classList.add` method, with a similar range of values as in `className`.
4. **classList remove & add**: This test case first adds a single class (`bar-1000`) and then enters a loop where it removes and re-adds classes with decreasing values (e.g., `bar-999`, `bar-998`, etc.).

**Library Usage**

The benchmark uses the following libraries:

* None explicitly mentioned, but the `classList` method is used, which is part of the HTML5 API.

**JavaScript Feature/Syntax**

No specific JavaScript features or syntax are used in this benchmark that would be unusual or non-standard. However, it's worth noting that the use of `while (i--)` loops can be considered slightly old-fashioned and may not be the most modern or efficient approach to looping.

**Performance Comparison**

The benchmark aims to compare the performance of these three approaches:

* **className**: Sets the class name using the `className` property, which is a part of the DOM API.
* **setAttribute**: Sets the "class" attribute using the `setAttribute` method, which is also part of the DOM API.
* **classList remove & add** and **classList**: Uses the `classList` method to set and manipulate class names, which is a feature introduced in HTML5.

The pros and cons of each approach are:

* **className**: Easy to use, but may not be as efficient as using attribute manipulation methods.
* **setAttribute**: Flexible and powerful, but requires more code to achieve the same result as `className`.
* **classList remove & add** and **classList**: Efficient and modern, but may require additional browser support for older versions.

Other alternatives that could be used in place of these approaches include:

* Using a library like jQuery or Lodash to simplify class manipulation.
* Using a CSS-in-JS solution like styled-components or Emotion.
* Implementing a custom class management system using JavaScript and DOM manipulation.

Related benchmarks:

className vs. setAttribute vs. classList - exclusive (version: 0)

1000 exclusive class name

Comparing performance of: className vs setAttribute vs classList vs classList remove & add

Created: one year ago by: Guest

Jump to the latest result

className

setAttribute

classList

classList remove & add

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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