Benchmark: className vs. setAttribute vs. classList

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); }

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

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

LLMs can make mistakes. Check important info.

Let's dive into the details of the provided JavaScript microbenchmarks.

**Benchmarking Context**

The benchmarks test three approaches for dynamically modifying an HTML element's class list: using `className` property, `setAttribute("class" ...)` method, and `classList.add()` method. These approaches are commonly used in web development to add or remove classes from an element.

**Library Usage**

There is no explicit library usage mentioned in the benchmarking code. However, it's essential to note that some browsers (like Chrome) may use internal libraries or APIs that can affect the results of the benchmarks.

**JavaScript Features/Syntax**

The benchmarks do not specifically target any special JavaScript features or syntax. They focus on testing the performance differences between three common approaches for updating an element's class list.

**Options Compared**

Here's a summary of the options compared in each benchmark:

1. **className**: Assigning a new value to the `className` property of the element.
2. **setAttribute("class" ...)**: Setting the "class" attribute with a new value using the `setAttribute()` method.
3. **classList.add()**: Adding a class to the element's class list using the `classList.add()` method.

**Pros and Cons of Each Approach**

Here's a brief summary of the pros and cons of each approach:

1. **className**:
	* Pros: Simple, straightforward, and widely supported by browsers.
	* Cons: Can lead to slower performance due to string concatenation (e.g., `element.className += 'bar' + i;`) in older browsers or with large class lists.
2. **setAttribute("class" ...)**:
	* Pros: Allows for more flexibility in setting the "class" attribute, which can be useful in certain scenarios.
	* Cons: May not work as expected in older browsers or when dealing with complex class names.
3. **classList.add()**:
	* Pros: Efficient and modern approach that takes advantage of HTML5's `classList` API.
	* Cons: Not supported by all browsers (e.g., older versions of Chrome, Safari) before they adopted the standard.

**Other Considerations**

When choosing an approach, consider factors like:

* Browser support and version compatibility
* Performance requirements for large-scale applications
* Code readability and maintainability
* Compatibility with older browsers or legacy code

**Alternative Approaches**

Some alternative approaches to dynamically modifying an element's class list include:

1. **DOM manipulation**: Using the `style` property to add classes or using a library like jQuery.
2. **CSS classes**: Using CSS classes to dynamically apply styles to elements, which can be more efficient than updating the class list directly.

Keep in mind that these alternatives might have different performance characteristics, trade-offs, and compatibility implications.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36

Browser/OS: Chrome 63 on Windows

View result in a separate tab

Test name	Executions per second
className	1113.2 Ops/sec
setAttribute	950.4 Ops/sec
classList	0.6 Ops/sec

Related benchmarks:

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

Comparing performance of: className vs setAttribute vs classList

Created: 6 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 26 days ago):