Benchmark: className vs. setAttribute vs. classList with multiple classnames

HTML Preparation code:

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

Tests:

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

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 compares three different approaches to set multiple class names on an HTML element: `className`, `setAttribute`, and `classList`. The test is designed to measure the performance difference between these approaches.

**Test Cases**

Each test case consists of a benchmark definition, which specifies how to prepare the JavaScript code and HTML for execution. There are three test cases:

1. **`className`**: Uses the `className` property to set multiple class names on an element.
2. **`setAttribute`**: Uses the `setAttribute` method to set individual class attributes on an element.
3. **`classList`**: Uses the `classList` API to add multiple class names to an element.

**Pros and Cons of Each Approach**

1. **`className`**:
	* Pros: Simple, widely supported, and efficient for small number of classes.
	* Cons: Can lead to slower performance when dealing with a large number of classes due to the browser's internal CSS parsing mechanisms.
2. **`setAttribute`**:
	* Pros: Fast and efficient for setting individual class attributes, but can be slower for multiple classes.
	* Cons: Requires more code than using `className`, and may lead to inconsistent class names if not used carefully.
3. **`classList`**:
	* Pros: Modern, efficient, and easy to use for adding or removing classes.
	* Cons: May not be supported in older browsers, and can be slower due to the browser's internal CSS parsing mechanisms.

**Library and Syntax**

None of the test cases rely on any external libraries. However, they do utilize some modern JavaScript features:

1. **`classList`**: Uses the `classList` API, which was introduced in ECMAScript 2015 (ES6).
2. **Arrow functions**: Used in some benchmark definitions to simplify code.

**Other Considerations**

When choosing an approach, consider the trade-offs between performance, maintainability, and compatibility with older browsers. For most use cases, `classList` is a good choice due to its modernity and efficiency. However, for smaller projects or legacy applications that require support for older browsers, `className` might be a better option.

**Alternatives**

Other approaches to setting multiple class names on an element include:

1. **`style` attribute**: Using the `style` attribute with CSS class selectors (e.g., `style="class:foo bar"`).
2. **CSS classes**: Adding CSS classes directly in HTML and using the browser's internal CSS parsing mechanisms.
3. **Custom solutions**: Implementing custom, optimized solutions for specific use cases or performance-critical applications.

Keep in mind that these alternatives may have different trade-offs and might not offer better performance or maintainability than the approaches tested in this benchmark.

Related benchmarks:

className vs. setAttribute vs. classList with multiple classnames (version: 0)

Comparing performance of: className vs setAttribute vs classList

Created: 5 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):