Benchmark: className vs. setAttribute vs. classList on body

HTML Preparation code:

<body></body>

Tests:

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

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:87.0) Gecko/20100101 Firefox/87.0

Browser/OS: Firefox 87 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
className	3654.2 Ops/sec
setAttribute	3043.5 Ops/sec
classList	2348.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is being tested?**

The provided JSON represents a benchmark that tests three different approaches to dynamically set the `className` attribute on an HTML `<body>` element:

1. **`className` property**: This approach sets the `className` property directly on the `<body>` element.
2. **`setAttribute` method**: This approach uses the `setAttribute` method of the `<body>` element to set its `class` attribute (note that this is different from `className`, which is a shorthand for multiple classes).
3. **`classList` API**: This approach uses the `classList` API to add a class name (`"bar"` in this case) to the `<body>` element.

**Options compared**

The three approaches are being tested against each other, and their performance differences will be measured.

**Pros and Cons of each approach:**

1. **`className` property**:
	* Pros: More concise and readable way to set class names.
	* Cons: Might not work as expected in older browsers that don't support the shorthand syntax.
2. **`setAttribute` method**:
	* Pros: Works across all browsers, but can be less readable than other approaches.
	* Cons: Requires specifying both `class` and `value` attributes, which can lead to more code.
3. **`classList` API**:
	* Pros: More efficient and modern way to manage classes, with better browser support.
	* Cons: Might require additional imports or setup if not already available.

**Library usage**

None of the test cases use any external libraries. The `classList` API is a native JavaScript API introduced in ECMAScript 2015 (ES6).

**Special JS feature or syntax**

The only special feature used here is the shorthand syntax for setting class names on an element, which is supported by most modern browsers but might not work in older versions.

**Other alternatives**

If you want to test additional approaches, some other options could include:

* Using CSS classes instead of JavaScript properties
* Utilizing browser-specific APIs (e.g., Chrome's `addStyleClass` method)
* Implementing custom class management logic

However, these alternative approaches might not be as widely supported or readable as the `className`, `setAttribute`, and `classList` methods used in this benchmark.

Related benchmarks:

className vs. setAttribute vs. classList on body (version: 0)

Comparing performance of: className vs setAttribute vs classList

Created: 3 years ago by: Guest

Jump to the latest result

className

setAttribute

classList

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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